防抖

事件被觸發(fā)后，先清空定時(shí)器，在設(shè)定的延時(shí)到了后，再執(zhí)行動(dòng)作。

使用場(chǎng)景：

1. resize/scroll 事件
2. 文本輸入的驗(yàn)證

節(jié)流

事件被觸發(fā)后， 直接執(zhí)行動(dòng)作，在設(shè)定的延時(shí)過(guò)后，清空定時(shí)器，再執(zhí)行第二次。

使用場(chǎng)景：
1）DOM 元素的拖拽功能實(shí)現(xiàn)（mousemove）
2）搜索聯(lián)想（keyup）
3）計(jì)算鼠標(biāo)移動(dòng)的距離（mousemove）
4）Canvas 模擬畫(huà)板功能（mousemove）
5）射擊游戲的 mousedown/keydown 事件（單位時(shí)間只能發(fā)射一顆子彈）
6）監(jiān)聽(tīng)滾動(dòng)事件判斷是否到頁(yè)面底部自動(dòng)加載更多

代碼實(shí)現(xiàn)

//----------------------- 防抖 ---------------------------
// debounce 函數(shù)接受一個(gè)函數(shù)和延遲執(zhí)行的時(shí)間作為參數(shù)
function debounce(fn, delay){
    // 維護(hù)一個(gè) timer
    let timer = null;
    return function() {
        // 獲取函數(shù)的作用域和變量
        let context = this;
        let args = arguments;

        clearTimeout(timer);
        timer = setTimeout(function(){
            fn.apply(context, args);
        }, delay)
    }
}
function foo() {
  console.log('trigger');
}
// 在 debounce 中包裝我們的函數(shù)，過(guò) 2 秒觸發(fā)一次
window.addEventListener('resize', debounce(foo, 2000));


// ----------------------- 節(jié)流 ----------------------------
// 時(shí)間戳方式
var throttle = function(func, delay){
    var prev = Date.now();
    returnfunction(){
        var context = this;
        var args = arguments;
        var now = Date.now();
        if(now-prev>=delay){
            func.apply(context,args);
            prev = Date.now();
        }
    }
}
// 定時(shí)器方式
var throttle = function(func, delay){
    var timer = null;
    returnfunction(){
        var context = this;
        var args = arguments;
        if(!timer){
            timer = setTimeout(function(){
                func.apply(context, args);
                timer = null;
            },delay);
        }
    }
}