函数节流和防抖

先来一张图:

2580.png

每一条竖线都代表着一次函数调用(如鼠标mousemove事件,input输入事件等)正常执行的时候,调用的频率很快.但有时,我们并不需要这么高的频率去调用这个函数.
假如这是一个调用后台接口的操作,那么就容易造成网络堵塞,大大的增加服务器的压力
函数防抖的时候,每次调用事件都是在正常执行暂停后一段时间(等你歇菜了我再上)
函数节流的时候,则是每隔一定的时间间隔就触发一次(管你频率那么快,我就保持自己的节奏)

一、函数节流(throttle)

函数节流：一个函数执行一次后，只有大于设定的执行周期后才会执行第二次。
规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。
有个需要频繁触发函数，出于优化性能角度，在规定时间内，只让函数触发的第一次生效，后面不生效。

比如在滚动加载更多的时候,在监听滚动条位置的时候并不是用户每次滚动都要去监听滚动条的位置,而是例如在1s内不管滚动多少次,只监听一次滚动条的位置.假如将节流运用到游戏当中,那就相当于技能的CD,CD没到,你就是按坏了键盘,技能也放不出来.

1.如何实现
其原理是用时间戳来判断是否已到回调该执行时间，记录上次执行的时间戳，然后每次触发 scroll 事件执行回调，回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达规定时间段，如果是，则执行，并更新上次执行的时间戳，如此循环；

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)

上例中用到了闭包的特性--可以使变量lastTime的值长期保存在内存中。

2.函数节流的应用场景
需要间隔一定时间触发回调来控制函数调用频率：

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

二、函数防抖(debounce)

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

<button id='btn'>按钮</button>
<script type="text/javascript">
function debounce(fn, delay) {
    // 记录上一次的延时器
   var timer = null;
    return function() {
    // 清除上一次延时器
    clearTimeout(timer)
    timer = setTimeout(function() {
            fn.apply(this)
        }, delay)
    }
}
document.getElementById('btn').onclick = debounce(function() {
    console.log('点击事件被触发' + Date.now())
}, 1000)
</script>

上例中也用到了闭包的特性--可以使变量timer的值长期保存在内存中。

2.函数防抖的应用场景

对于连续的事件响应我们只需要执行一次回调：

每次 resize/scroll 触发统计事件
文本输入的验证（连续输入文字后发送 AJAX 请求进行验证，验证一次就好）

区别

节流和防抖都是通过一定时间间隔限制事件多次触发，节流是第一次触发生效，之后触发的都不起作用，而防抖是最后一次起作用，前面的都无效，并且重新计算时间。

总结:

防抖和节流都是为了限制函数的执行频率,以优化函数触发频率过高导致的响应速度跟不上,延迟假死或卡顿的现象
函数防抖:原理是维护一个计时器,在规定时间后执行回调.若在此期间再次触发,则重新开始计时
函数节流:原理是判断是否达到规定时间