浅谈throttle以及debounce的原理和实现

浅谈throttle以及debounce的原理和实现

---

背景

平常开发中,咱们常常会遇到一些须要节流调用,或者压缩调用次数的状况,例如以前我在完成一个需求的时候,就遇到了由于后端并发问题,致使收到多条socket信息从而致使函数被重复调用的状况,当时的作法是经过setTimeout对函数的调用进行注册,遇到屡次调用的时候,清空前一次的调用,之后一次为准.后来在阅读underscore源码的时候,发现这种作法与debounce以及throttle的实现不谋而合.于是简单记录一下.

throttle与debounce

throttle与debounce在用于控制函数的屡次调用的时候,很是的有效.throttle函数可以控制目标函数在必定的时间内最多只会调用一次.而debounce函数,则能够压缩调用的次数,把屡次函数调用压缩成只调用一次(屡次的函数调用之间的间隔不能超过规定的时间间隔).
这样文字描述起来可能比较难理解,不过没关系,当初我在看underscore源码的时候,也是很是难以理解这两个函数的需求,感受好像都差很少同样.并且underscore在1.1.3版本中,采用了相同的底层实现,只是接口传入的参数不一样而已.于是咱们这里采用一个坐电梯的例子来讲明.

debounce电梯

假设你正在准备乘坐电梯,而且电梯门准备关上而后上升的时候,你的同事来了,出于礼貌,咱们须要中止电梯的关闭,让同事进入.假设源源不断的有同事进来的话,电梯就须要处于一种待机的状态,一直等待人员的进入,直到没有新的同事进入或者说电梯满了,这个时候,电梯才能运行.另外,同事的进入须要在电梯门的关闭以前,不然的话,就只能等下一趟了.
换成图示咱们能够这么理解

上面一排方块为函数的调用,下面的方块则是函数实际的运行.咱们能够看到,即便函数屡次调用,在短暂的暂停后,函数只会运行一次.

debounce运用场景

既然debounce函数能够把屡次的函数调用压缩成一次,那么咱们在进行Markdown渲染的时候,就能够排上用场了.若是咱们在每一次键盘的敲击都进行一次Markdown渲染,必然会形成部分的计算冗余,同时也可能由于屡次无畏的渲染致使页面卡顿,影响体验,于是咱们可使用debounce函数,把Markdown的渲染进行压缩,只在键盘敲击结束了必定的时间后((能够完成一次词语或者语句的输入),再进行渲染,可以减小许多冗余的计算,提升体验.

throttle电梯

throttle电梯不想debounce电梯同样会无限的等待,而是咱们设定一个时间,例如10s,那么10s内,其余的人能够不断的进入电梯,可是,一旦10s过去了,那么不管如何,电梯都会进入运行的状态.

换成图示,咱们能够这么理解

上面一排的方块是函数的调用,咱们能够看到,及时进行了屡次的函数调用,函数也只会在隔一段时间实际运行一次,不会每一次的函数调用都运行

throttle运用场景

throttle也有另一个称号,就是节流函数,顾名思义就是可以节省函数调用时的资源消耗,达到防止系统资源被一直大量占用,从而影响其余函数执行的状况.throttle一个运用的比较普遍的场景则是经过对scroll函数进行节流,由于每一次滚动页面,都有进行资源的消耗计算,可是彻底不必每一次滚动时间触发的时候,都进行计算,这样有可能会致使大量的计算堆积而出现跳帧的状况发生,于是咱们须要使用throttle函数进行节流,在滚动事件发生了一段事件后,再统一的进行处理,只要时间设置的合理,用户通常是感知不到的.

debounce与throttle的原理与实现

解释的再多,也不如咱们直接本身实现一遍debounce与throttle,这样对于两个函数的运用和理解,都会更上一层楼.debounce与throttle在许多的库,例如jQuery,loadash以及underscore中都有实现,这里采用underscore的1.1.3版本的实现,很是简单并且可以达到目的(其实主要是最近在看underscore源码)
代码以下

// throttle 和 debouce 函数的底层实现
    var limit = function(func, wait, debounce) {
        var timeout;
        return function() {
            var context = this, args = arguments;
            // 封装函数,用于延迟调用
            var throttler = function() {
                // 只是节流函数的时候,对其timeout进行赋值为null,这样能够设置下一次的setTimtout
                timeout = null;
                func.apply(context, args);
            };
            // 若是debouce是true的话,前一个函数的调用timeout会被清空,不会被执行
            // 就是debounce函数的调用,这个前一个函数的不会执行.下面会从新设定setTimeout用于
            // 执行这一次的调用.
            // 可是若是是throttle函数,则会执行前一个函数的调用,同时下面的setTimeout在
            // 函数没有运行的时候,是没法再次设定的.
            if (debounce) clearTimeout(timeout);
            // 若是debouce是true 或者 timeout 为空的状况下,设置setTimeout
            if (debounce || !timeout) timeout = setTimeout(throttler, wait);
        };
    };

    // throttle 节流函数
    _.throttle = function(func, wait) {
        return limit(func, wait, false);
    };

    // debouce 屡次调用,只执行最后一次.
    _.debounce = function(func, wait) {
        return limit(func, wait, true);
    };

代码上面都加了注释,比较好理解,并且也比较简单.经过代码,咱们能够更加进一步的理解debounce与throttle的原理以及实现,主要都是经过标志位来判断是否要清空setTimeout以及是否要生成新的setTimeout

至此,debounce与throttle的原理以及实现基本就介绍完成了.写的不是特别的流畅,你们凑合着看,主要仍是用于记录在平常工做中以及在源码阅读中遇到的一些小发现和小灵感.

参考

jQuery throttle / debounce: Sometimes, less is more!