前言
防抖函數和節流函數,無論是寫業務的時候還是面試的時候,想必大家已經聽過很多次了吧.但是大家在用到的時候,有了解過他們之間的區別嘛,他們是如何實現的呢?還是說只是簡單的調用下像lodash和underscore這種第三方庫提供給我們的節流和防抖函數呢?
本文接下來將會帶你們了解下這兩者的區別,以及我們該如何手寫實現這兩個函數.
防抖函數和節流函數的區別
防抖函數:是指觸發了一個事件,在規定的時間內,如果沒有第二次事件被觸發,那么他就會執行.換句話講,就是說,如果不斷有事件被觸發,那么規定的執行時間將會被不斷推遲
節流函數:指的是在規定時間內,你無論觸發多少次事件,你也只會執行一次.我舉個生活中的例子,就很好理解了.王者榮耀這個游戲可能很多人多玩過,每個英雄都有自己的技能,在我們點擊一次后,該技能會進入冷卻時間,即使我們點的再快,該技能在冷卻時間好之前也只能觸發一次(我們第一次點擊的時候)
防抖函數的實現
我將實現防抖函數的四個功能,希望大家能一步步的跟着來,循序漸進,相信大家一定會有收獲的
基本實現
我們可以想下,要想一個事件在規定時間過后執行,在JS中該怎么實現🤓
🎈🎈🎈🎈
好 時間到
定時器,小伙伴們肯定都知道的吧🎉
觸發事件,在一定時間后執行,這個可以使用定時器解決了.
那么 接下來還有一個問題 在觸發事件后,再觸發事件,該如何讓他推遲執行呢?
如果規定時間內,再觸發的話,我們就把之前創建的定時器刪除不就好了,對不對?
這樣是不是就解決了我們的問題,好,我們現在來寫下代碼,怕大家有點不明白
function debounce(fn, delay) {
//定義一個定時器
let timer = null;
// 每次觸發的時候 清空上一次的定時器
const _debounce = function () {
if (timer) clearTimeout(timer);
//根據傳進來的延時 執行
timer = setTimeout(() => {
fn();
}, delay)
}
return _debounce;
}
這段代碼還是比較容易的吧,相信小伙伴們肯定都懂了🎆
但是這段代碼還是有點問題,我們來調用下第三方庫的underscore的防抖函數
<body>
<button>取消</button>
<input type="text">
<script src="https://cdn.jsdelivr.net/npm/underscore@1.13.1/underscore-umd-min.js"></script>
<script>
const btn = document.querySelector("button");
const input = document.querySelector("input");
let count = 0;
function test(event) {
// 注意這里的this 和 event
console.log(`發送${++count}網絡請求`, this, event);
return "我是返回結果";
}
input.oninput = _.debounce(test, 2000);
</script>
</body>
我們打開瀏覽器調試,看下輸出結果
可以看到this和Event輸出是沒有任何問題的.
再來看看我們的輸出
你會發現 this是window了 而Event是undefined.
這是為什么呢?
這是因為 我們寫的代碼沒有對this進行一個綁定,同時也沒有將DOM元素的event接收
fn()直接執行 這時候的this是直接指向window的
function debounce(fn, delay) {
let timer = null;
//使用剩余參數接收所有的參數 DOM在調用這個函數的時候,我們就能接收到event了
const _debounce = function (...args) {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
//注意 我們使用apply進行一個換綁,綁到執行這個的DOM元素上
fn.apply(this,args);
}, delay)
}
return _debounce;
}
至此,我們這個防抖函數的基本實現就沒有任何問題了
看到這里的小伙伴們,你們真不錯🎉🎉🎉
這個基本實現 拿來應付面試已經夠了,接下來我們還有一些額外的功能要實現,想看的可以繼續往下看了,現在不想看的也可以收藏下,以后來看.
立即執行
在某些應用場景下,比如搜索的時候,你輸入第一個字符的時候,他就會聯想出一系列的字符,他不會等待一段時間后再去執行,而是會立馬執行,我們接下來實現下這個功能
首先,立即執行這個功能,我們可以將它交給用戶來決定是不是要使用這個功能
debounce(fn,delay,immediate=false)
我們以參數的形式傳遞,默認是關閉的
好,我們現在來看下代碼實現
function debounce(fn, delay, immediate = false) {
let timer = null;
//代碼規范 我們最好不要修改 用戶傳遞進來的參數
//所以我們在下面聲明了一個變量 用於控制
let isInvoke = false;
const _debounce = function (...args) {
if (timer) clearTimeout(timer);
//如果immdiate為true
//isInvoke取反為true
if (immediate && !isInvoke) {
//會立馬執行一次
fn.apply(this, args);
//同時將isInvoke設置為true,防止下次觸發的時候 又再次觸發立即執行
isInvoke = true;
} else {
//第一次觸發結束立即執行后
//isInvoke會限定在定時器中 輸入結束后 才會重新刷新isInvoke
timer = setTimeout(() => {
//剩下的操作在規定時間內 會等待定時器結束
fn.apply(this, args);
//同時重新刷新inInvoke
isInvoke = false;
}, delay)
}
}
return _debounce;
}
好,這一塊還是比較簡單的吧,相比大家應該看懂了,如果有什么不懂的地方,歡迎評論區留言,我看見了就會回答的✨
那么我們開始下一個篇章的 如果用戶輸入之后 不想讓他請求呢 這時候我們就需要一個取消功能了,對,我們接下來就是要實現取消功能了
取消功能
我們該如何在剩余的時間內取消請求呢?
對 沒錯! 清空定時器
我們只需要在我們返回的函數上加個靜態方法 給用戶提供個取消功能即可
我們來看下代碼實現
// 給返回的這個函數添加一個靜態方法 用於取消請求
_debounce.cancel = function () {
if (timer) clearTimeout(timer);
}
是不是很簡單呢? 就這么簡單一行代碼 取消功能就完成了
好,我們還有最后一個功能需要實現的 那就是如果開發者想要拿到請求后的返回結果的話,我們現階段的防抖函數能不能做到呢? 貌似不行吧?
所以接下來,我們來實現最后一個功能 取到返回結果
返回結果
我們思考一個問題 返回結果在哪呢?
用戶傳遞一個函數給我們 返回一個新的函數
那么返回結果一定是在用戶傳遞給我們的那個函數上的
所以關鍵就是 將用戶的那個函數的返回結果傳遞出來
現在 我們這里有兩個方案
- 回調函數
- Promise
我們先來看下回調函數的版本
// 回調函數版本
function debounce(fn, delay, immediate = false, resultCallBack) {
let timer = null;
let isInvoke = false;
let result = null;
const _debounce = function (...args) {
if (timer) clearTimeout(timer);
if (immediate && !isInvoke) {
//接收結果
result = fn.apply(this, args);
resultCallBack(result);
isInvoke = true;
} else {
timer = setTimeout(() => {
//接收結果
result = fn.apply(this, args);
resultCallBack(result);
isInvoke = false;
}, delay)
}
}
_debounce.cancel = function () {
if (timer) clearTimeout(timer);
timer = null;
isInvoke = false;
}
return _debounce;
}
實際應用
const _debounce = () => {
debounce(test, 1000)().then(res => {
console.log(res);
})
}
input.oninput = _debounce;
回調函數的是不是比較簡單? 我們來看下Promise版本的 在實際應用的時候要注意一些坑
function debounce(fn, delay, immediate = false) {
let timer = null;
let isInvoke = false;
let result = null;
const _debounce = function (...args) {
//在返回的函數中 直接整體返回一個Promsie對象
//將結果傳入 resolve中
return new Promise((resolve, rejected) => {
if (timer) clearTimeout(timer);
if (immediate && !isInvoke) {
result = fn.apply(this, args);
resolve(result)
isInvoke = true;
} else {
timer = setTimeout(() => {
result = fn.apply(this, args);
resolve(result);
isInvoke = false;
}, delay)
}
})
}
_debounce.cancel = function () {
if (timer) clearTimeout(timer);
timer = null;
isInvoke = false;
}
return _debounce;
}
實際調用
const _debounce = function(...args){
debounce(test, 1000).apply(this,args).then(res => {
console.log(res);
})
};
input.oninput = _debounce;
注意到了吧 我們對原來的函數又封裝了一層 因為只有這樣才能拿到promise的結果
同時this和event不會出問題
看到這里的小伙伴們真棒,相信你們防抖函數一定沒問題了,待會我們就開始講解 節流函數該如何實現
節流函數的實現
節流函數我們也是從幾個方面逐步實現,帶着大家一步步的解開節流函數的面紗.
基本實現
大家可以想下,節流函數該如何實現.
一段時間內,只會觸發一次操作,后續的操作就不會被觸發.
我們可以拿到當前的時間戳 來進行計算
我們直接通過代碼來講吧 比較方便講
function throttle(fn, interval) {
let lastTime = 0;
const _throttle = function () {
//首先拿到當前的時間
const nowTime = new Date().getTime();
//傳遞進來的時間間隔 用當前的時間減去上一次觸發的時間
//得到最新的剩余時間
const reamainTime = interval - (nowTime - lastTime);
if (reamainTime <= 0) {
fn();
//如果剩余時間小於0 說明已經達到一個間隔
//並且將現在的時間賦值給lastTime
//在時間間隔內 這樣無論執行多少次 都只會執行第一次的操作
//因為第一次的lastTime是0 而nowTime是比較大的
//減去之后一定是個負數 所以會執行第一次
//而不會執行后續的操作
lastTime = nowTime;
}
}
return _throttle;
}
大家看下我上面這段代碼 還是比較好理解的吧,面試的話能夠寫出這一部分已經很可以了,但是要想更加出彩,能和面試官多嘮會的吧,我們接着看下面的實現
leading實現
我們在基本實現中,其實已經將這個功能已經實現了,但是並不是可以控制的,我們這個實現是將是否首次觸發交給用戶來決定,大家可以想下該如何實現❓
❗基本實現中,我們是如何實現第一次觸發的?
是不是通過拿到的時間戳非常大,而lastTime為0所導致的呢?
所以我們是不是可以讓lastTime也能拿到當前的時間戳呢,這樣子, nowTime和lastTime相減的時候,是不是就不會變成負數呢?
✨代碼實現
// 考慮到 我們后面會有很多功能要實現
//所以我們使用選項來進行配置.避免造成更多參數
function throttle(fn, interval, option = { leading: true }) {
let lastTime = 0;
const { leading } = option;
const _throttle = function () {
const nowTime = new Date().getTime();
//在 leading和lastTime為false的情況下
//就將nowTime賦值給lastTime,這樣就不會在第一次就執行操作了
if (!leading && !lastTime) lastTime = nowTime;
const reamainTime = interval - (nowTime - lastTime);
if (reamainTime <= 0) {
fn();
lastTime = nowTime;
}
}
return _throttle;
}
💯大家是不是理解了呢? 我個人認為還是比較好懂的吧,不懂的可以在評論區留言,我看到就會給大家解答的
🤓接下來,我們看下和這個情況相反的一種狀況,如果我們想要在最后一次操作的時候進行一次觸發操作的話,該如何去做呢?
trailing實現
這一塊是比較難的部分了,會有點難,大家不懂的話,要多看幾遍,實在有不明白的,歡迎評論區留言
❓首先最后一次觸發操作時,我們該怎么樣讓它執行?
❗我提供一個思路,當我們最后一次觸發操作的時候,拿到距離間隔還有多少時間結束,加上一個定時器,讓他根據這個剩余時間去按時執行
✨代碼實現
function throttle(fn, interval, option = { leading: true, tralling: false }) {
let lastTime = 0;
let timer = null;
const { leading, tralling } = option;
const _throttle = function (...args) {
const nowTime = new Date().getTime();
if (!leading && !lastTime) lastTime = nowTime;
const reamainTime = interval - (nowTime - lastTime);
if (reamainTime <= 0) {
fn.apply(this, args);
lastTime = nowTime;
if (timer) {
clearTimeout(timer)
timer = null;
}
// 如果執行了這一部分 那么后面的tralling就沒有必要去執行
// 說明剛好執行到了這一步 后面的最后按下 就不需要
return;
}
if (tralling && !timer) {
timer = setTimeout(() => {
timer = null;
/** `
* 首先 按下第一次的時候 這個定時器已經被加上了
* 每次進來的時候 等待一定時間 定時器會被置空 方便下次使用
* 根據剩余時間 來判斷執行
* 如果leading為false lastTime會被設置為0 會在規定的剩余時間到達后 去執行這個函數 而remianTime那個部分就不會被執行 因為remainTime會一直保持在一個正數狀態
* 如果leading為true lastTime會被設置為當前的時間 這樣在下一次的操作下,remainTime才會發生變化
*
*/
lastTime = !leading ? 0 : new Date().getTime();
fn.apply(this, args);
}, reamainTime)
}
}
return _throttle;
}
是不是比較難懂呢? 我在來解釋一下啊
❗❗
- 首先如果remainTime已經小於0了,那么fn就會去執行,我們也就不需要去執行后續的操作了 會直接返回
- 那么如果remainTime沒有小於0,我們會設置定時器,在定時器內部,我們需要先把timer清空,防止下一次觸發的時候又觸發了.
- 其次,我們要將lastTime進行一個處理
- 如果我們之前設置的
leading是false的話,那么我們需要將lastTime置為0,這樣在下一次的觸發操作的時候,才能觸發leading為false的情況下的邏輯語句 leading為true的情況下,需要將lastTime設置為當前的時間戳,這樣在下一次的操作的時候,才會remainTime才會發生變化,邏輯才能執行下去.
- 如果我們之前設置的
💯大家有沒有聽明白呢? 可能是會有點難懂,但是好好多看幾遍,還是能夠理解的我相信!!!
接下來的操作就比較簡單了,大家可以安心食用,和防抖函數一樣,是取消功能和返回結果
取消功能和返回結果
因為這個和防抖函數是一樣的,所以我這里直接就放代碼了
function throttle(fn, interval, option = { leading: true, tralling: false, resultCallback }) {
let lastTime = 0;
let timer = null;
let result = null;
const { leading, tralling, resultCallback } = option;
// 兩種結果回調
//和防抖函數是一樣的
//1. 通過傳遞一個回調函數
//2. 通過promise 進行結果回調
const _throttle = function (...args) {
return new Promise((resolve, reject) => {
const nowTime = new Date().getTime();
if (!leading && !lastTime) lastTime = nowTime;
const reamainTime = interval - (nowTime - lastTime);
if (reamainTime <= 0) {
result = fn.apply(this, args);
resultCallback(result);
resolve(result);
lastTime = nowTime;
if (timer) {
clearTimeout(timer)
timer = null;
}
return;
}
if (tralling && !timer) {
timer = setTimeout(() => {
timer = null;
lastTime = !leading ? 0 : new Date().getTime();
result = fn.apply(this, args);
resultCallback(result);
resolve(result);
}, reamainTime)
}
})
}
//取消功能
_throttle.cancel = function () {
if (timer) clearTimeout(timer);
timer = null;
lastTime = 0;
}
return _throttle;
}
大家可以看下是不是一摸一樣的呢? 非常輕松吧
能看到這里的小伙伴們,一定收獲很大,你們真棒🎉🎉
最后,讓我介紹一下我自己,我是CodeSpirit,一名正在學習前端的coder,關注我,帶你學習更多前端知識❗❗❗