防抖和節流

瀏覽器的resize，scroll，輸入框內容校驗、遠程搜索，按鈕點擊等交互操作，如果這些操作對應的處理函數比較複雜（服務器請求、瀏覽器重渲染）時，事件觸發的頻率又無限制，會加重瀏覽器的負擔，導致用戶體驗非常糟糕，防抖和節流是用來減輕瀏覽器的負擔的，減少出發頻率，同時又不影響效果的呈現。

• 防抖

減少事件觸發的頻率，控制函數在一定時間內的執行次數。防抖意味着N秒內函數只會被執行一次，如果N秒內再次被觸發，則重新計算延遲時間；

一般用於如下事件：

1. 輸入框的校驗
2. 瀏覽器縮放resize
3. 按鈕提交

防抖函數：

function debounce(fn,wait,immediate) {
    let timeout;
   var debounced = function () {
       if(timeout){
           clearTimeout(timeout)
       }
       timeout = setTimeout(function (args) {
           fn();
       },wait);
       if(immediate){
           fn();
       }
   }
   return debounced;
}

使用實例：

var elInput = document.getElementById('inpt');
var btn = document.getElementById('btn')
elInput.addEventListener('input',
    debounce(function () {
        console.log(33)
        el.innerHTML = elInput.value;
    },1000,false)
);

 

• 節流

同樣也是用來高頻事件觸發，在n秒內只會執行一次，節流會稀釋函數的執行頻率，按設定的時間頻率執行，

   一般用於如下事件：

1. 按鈕點擊
2. scroll
3. 拖曳事件

節流函數：

function throtte(fn,delay) {
    let timeout;
    let startTime = Date.now()
    var throtted = function () {
        let now = Date.now();
        console.log(startTime,now,now-startTime)
        clearTimeout(timeout)
        if(now-startTime>delay){
            fn();
            startTime = Date.now();
        }else{
            timeout = setTimeout(fn,1000)
        }
    }
    return throtted;
}

 

使用實例：

btn.addEventListener('click',throtte(function () {
  console.log('submit');
  console.log(elInput.value)
},2000)
)