节流防抖

有些情况下会产生问题：

• 向后台发送数据，用户频繁触发，对服务器造成压力
• 一些浏览器事件:window.onresize、window.mousemove等，触发的频率非常高，会造成浏览器性能问题。

以上需要用到函数节流和防抖；
核心：限制某一个方法被频繁触发，而一个方法之所以会被频繁触发，大多数情况下是因为 DOM 事件的监听回调，而这也是函数节流以及防抖多数情况下的应用场景。
共同点：都为防止事件频繁触发；
不同点：节流：单位时间内，触发第一次事件；防抖：单位时间内，触发最后一次事件

一、函数节流(throttle)

函数执行后，只有大于设定的执行周期后才会执行第二次。
频繁触发的函数，在规定时间内，只让函数触发的第一次生效，后面不生效。
原理：用时间戳判断是否已到回调该执行时间；记录上次执行的时间戳，每次触发事件执行回调，回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达规定时间段，如果是，则执行，并更新上次执行的时间戳，如此循环；

function throttle(fn, delay) {
    // 记录上一次函数触发的时间
    var lastTime = 0;
    return function() {
        // 记录当前函数触发的时间
        var nowTime = Date.now();
        if (nowTime - lastTime > delay) {
        // 修正this指向问题
        fn.call(this);
        // 同步时间
          lastTime = nowTime;
        }
    }
}
document.onscroll = throttle(function() { 
    console.log('scroll事件被触发了' + Date.now()) 
}, 200)

01.png

第二种方法是使用定时器，比如，当scroll事件刚触发时，打印一个hello world ，然后设置一个1000ms的定时器，此后每次触发scroll事件，触发回调，如果已经存在定时器，则回调不执行方法，直到定时器触发，handler被清除，然后重新设置定时器。

function throttlePro(delay, action) {
    var tId;
    return function () {
        var context = this;
        var arg = arguments;
        if (tId) return;
        tId = setTimeout(function () {
                    action.apply(context, arg);
                    clearTimeout(tId);
                    // setTimeout 返回一个整数，clearTimeout 之后，tId还是那个整数,setInterval同样如此
                    tId = null;
        }, delay);
    }
}

函数节流的应用场景

1. 需要间隔一定时间触发回调来控制函数调用频率：
2. DOM 元素的拖拽功能实现（mousemove）
3. 搜索联想（keyup）
4. 计算鼠标移动的距离（mousemove）
5. Canvas 模拟画板功能（mousemove）
6. 射击游戏的 mousedown/keydown 事件（单位时间只能发射一颗子弹）
7. 监听滚动事件判断是否到页面底部自动加载更多：给 scroll 加了 debounce 后，只有用户停止滚动后，才会判断是否到了页面底部；如果是 throttle 的话，只要页面滚动就会间隔一段时间判断一次

二、函数防抖(debounce)

频繁触发的函数，在规定时间内，只让最后一次生效，前面的不生效。
原理：第一次调用函数，创建一个定时器，在指定的时间间隔之后运行代码。当第二次调用该函数时，它会清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了，这个操作就没有任何意义。然而，如果前一个定时器尚未执行，其实就是将其替换为一个新的定时器，然后延迟一定时间再执行。

按钮

02.png

上面用到了闭包的特性--可以使变量timer的值长期保存在内存中。
函数防抖的应用场景

1. 对于连续的事件响应我们只需要执行一次回调：
2. 每次 resize/scroll 触发统计事件
3. 文本输入的验证（连续输入文字后发送 AJAX 请求进行验证，验证一次就好）

函数防抖：如果A在10：00:00开门走入电梯内（触发事件），如果后续没有人进入电梯，电梯将在5秒钟之后10：00:05关门（执行事件监听器）。这时如果B在10：00:04走入电梯内，电梯会在10：00:09才关门。
函数节流 ：如果A在10：00:00开门走入电梯内（触发事件），如果后续没有人进入电梯，电梯将在5秒钟之后10：00:05关门（执行事件监听器）。这时如果B在10：00:04走入电梯内，电梯同样是在10：00:05关门。这个时间从第一个人进入电梯开始计时，不管在5秒之内进来多少人，电梯都会在10：00:05关门。如果一直没有人进来，则电梯不运行。
效果：
函数防抖是某一段时间内只执行一次；
函数节流是间隔时间执行，不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数。
原理：
防抖是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，都会清除当前的 timer 重新计时。这样一来，只有最后一次操作事件才被真正触发。
节流是通过判断是否到达一定时间来触发函数，若没到规定时间则使用计时器延后，而下一次事件则会重新设定计时器。