函数节流和函数去抖

Posted lu0511

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了函数节流和函数去抖相关的知识,希望对你有一定的参考价值。

函数节流和函数防抖,两者都是优化高频率执行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库都对以上方法进行了实现,而且封装的更好,功能更完善

以上是关于函数节流和函数去抖的主要内容,如果未能解决你的问题,请参考以下文章

js去抖和节流函数详解

javascript中的函数节流和函数去抖

函数节流与函数去抖

JavaScript函数节流(throttle)与函数去抖(debounce)

JS debounce和throttle 去抖和节流

函数节流(throttle)与函数去抖(debounce)