所謂節流,就是事件一直被觸發的話,第一次觸發立即執行,接下來每隔一段時間才會觸發一次。
接下來我們理一下思路:
1. 該函式要有一個引數為事件合理觸發後要呼叫的函式,我們定義為fn;
2. 第二個引數為呼叫該函式的物件,即函式執行時的this指向,我們定義為context;
3. 第三個引數為呼叫該函式時要傳入的引數,我們定義為陣列args;
4: 第四個引數為延遲時間,我們定義為delay;
注:函式內部我們還會給fn定義一個屬性,用來接收setTimeout的fn.throttleTimerId
程式碼如下:
let throttle = (fn,context,args,delay=500) => {
// 每次事件觸發,如果存在fn.debounceATimerId,則結束函式執行,以此限制函式呼叫頻率
if(fn.throttleTimerId){
return;
}else{
// 呼叫fn,並繫結this為context,引數為args
fn.apply(context,args);
// 設定delay毫秒後清除fn.throttleTimerId,以保證函式可以再次被呼叫
fn.throttleTimerId=setTimeout(() => {
fn.throttleTimerId = null;
},delay)
}
};
複製程式碼
如果有錯誤或者不嚴謹的地方,請給予指正,十分感謝!