函數節流-防抖函數

函數節流閉包

一個函數執行一次後,只有大於設定的執行週期纔會執行第二次,防止高頻率的屢次執行app

情景:函數

監聽頁面滾動時,輸出‘我滾動了’,處於優化性能考慮,不但願每次事件觸發時就輸出,而是在觸發的狀況下每隔200ms執行一次。性能

 1 /* 
 2     節流函數
 3     @param fn 要被節流的函數
 4     @param delay 規定的間隔時間
 5     */
 6 function throttle(fn, delay) {
 7     var lasttime = 0; //上次執行的時間
 8     return function () { //此處用閉包,就是爲了記錄lasttime,lasttime不會立刻被銷燬,也不會從新被聲明賦值
 9         var nowtime = Date.now();//本次執行的時間
10         if (nowtime - lasttime > delay) { //本次減上次時間大於delay時執行fn
11             fn.call(this); //修正this指向問題
12             lasttime = nowtime; //執行完fn後,從新賦值lasttime
13         }
14     }
15 }
16 // onscroll右邊的值必須是個函數,恰好throttle()調用後的返回值是return後的函數
17 window.onscroll = throttle(function () {
18     console.log('我滾動了')
19 }, 200);

防抖函數優化

一個須要頻繁處罰的函數,在規定的時間內,只讓最後一次生效,前面的不生效。this

情景:spa

重複點擊某個按鈕,最快的二次點擊爲300mscode

 1 function debounce(fn, delay) {
 2     var timer = null;//記錄上次的延時器
 3     return function () {  //此處用閉包,爲了記錄timer
 4         clearTimeout(timer); //清除上次的計時器
 5         timer = setTimeout(function () { //從新賦值本次得延遲點擊
 6             fn.apply(this);  //執行fn,修正this指向問題
 7         }, delay);  
 8     }
 9 }
10 
11 // onclick右邊的值必須是個函數,恰好throttle()調用後的返回值是return後的函數
12 document.querySelector('#button').onclick = throttle(function(){
13     console.log('我點擊了')
14 },1000);

總結blog

節流函數就是執行第一次,指定時間後纔會執行第二次事件

防抖函數就是在指定時間內,只執行最後一次,缺點就是會被延遲執行

點擊按鈕發起請求時,特別要注意,防止用戶重複點擊。

具體用哪一個好,視狀況而定吧。

相關文章
相關標籤/搜索