函数节流和函数去抖

Posted 2020-10-19 lu0511

函数节流和函数防抖，两者都是优化高频率执行js代码的一种手段。

 以下场景往往由于事件频繁被触发，因而频繁执行DOM操作、资源加载等重行为，导致UI停顿甚至浏览器崩溃。

  1. window对象的resize、scroll事件

  2. 拖拽时的mousemove事件

  3. 射击游戏中的mousedown、keydown事件

  4. 文字输入、自动完成的keyup事件

  实际上对于window的resize事件，实际需求大多为停止改变大小n毫秒后执行后续处理；而其他事件大多的需求是以一定的频率执行后续处理。针对这两种需求就出现了debounce（去抖）和throttle（节流）两种解决办法。

函数节流是指一定时间内js方法只跑一次。比如人的眨眼睛，就是一定时间内眨一次。这是函数节流最形象的解释。
函数防抖是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次。比如生活中的坐公交，就是一定时间内，如果有人陆续刷卡上车，司机就不会开车。只有别人没刷卡了，司机才开车。

函数节流

函数节流：就是函数按照一个周期执行，例如给window绑定一个resize事件之后，只要window大小改变就打印1，如果不采用函数节流，当我们将窗口调节的时候发现控制台一直打印1，但是使用了函数节流后我们会发现调节的过程中，每隔一段时间才打印1。
下面是函数节流的简单实现。

var throttle = function(delay, cb) {
    var startTime = Date.now();
    return function() {
        var currTime = Date.now();
        if (currTime - startTime > delay) {
            cb();
            startTime = currTime;
        }
    }
}

函数去抖

函数去抖：就是当事件触发之后，必须等待某一个时间之后，回调函数才会执行，假若再等待的时间内，事件又触发了则等待时间刷新。还是上面那个例子，如果我们一直改变窗口大小，则不会打印1，只有当我们停止改变窗口大小并等待一段时间后，才会打印1。
下面是函数去抖的简单实现。

var debounce = function(delay, cb) {
    var timer;
    return function() {
        if (timer) clearTimeout(timer);
        timer = setTimeout(function() {
            cb();
        }, delay);
    }
}

两种方法均使用了闭包（缓存变量），但是这是简单的实现。
目前lodash和underscore这两个现成的js库都对以上方法进行了实现，而且封装的更好，功能更完善