防抖和节流

防抖

事件被触发后，先清空定时器，在设定的延时到了后，再执行动作。

使用场景：

1. resize/scroll 事件
2. 文本输入的验证

节流

事件被触发后， 直接执行动作，在设定的延时过后，清空定时器，再执行第二次。

使用场景：
1）DOM 元素的拖拽功能实现（mousemove）
2）搜索联想（keyup）
3）计算鼠标移动的距离（mousemove）
4）Canvas 模拟画板功能（mousemove）
5）射击游戏的 mousedown/keydown 事件（单位时间只能发射一颗子弹）
6）监听滚动事件判断是否到页面底部自动加载更多

代码实现

//----------------------- 防抖 ---------------------------
// debounce 函数接受一个函数和延迟执行的时间作为参数
function debounce(fn, delay){
    // 维护一个 timer
    let timer = null;
    return function() {
        // 获取函数的作用域和变量
        let context = this;
        let args = arguments;

        clearTimeout(timer);
        timer = setTimeout(function(){
            fn.apply(context, args);
        }, delay)
    }
}
function foo() {
  console.log('trigger');
}
// 在 debounce 中包装我们的函数，过 2 秒触发一次
window.addEventListener('resize', debounce(foo, 2000));


// ----------------------- 节流 ----------------------------
// 时间戳方式
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();
        }
    }
}
// 定时器方式
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);
        }
    }
}