上周写了，结果微博上交流的人还挺多，大家都提到了一个技术名词：“throttle”。

throttle

我们这里说的throttle就是函数节流的意思。再说的通俗一点就是函数调用的频度控制器，是连续执行时间间隔控制。主要应用的场景比如：

• 鼠标移动，mousemove 事件
• DOM 元素动态定位，window对象的resize和scroll 事件

有人形象的把上面说的事件形象的比喻成机关枪的扫射，throttle就是机关枪的扳机，你不放扳机，它就一直扫射。我们开发时用的上面这些事件也是一样，你不松开鼠标，它的事件就一直触发。回到提到的优化：

var resizeTimer = null;$(window).on('resize', function () {        if (resizeTimer) {            clearTimeout(resizeTimer)        }        resizeTimer = setTimeout(function(){            console.log("window resize");        }, 400);    });

setTimeout和clearTimeout其实就是一个简单的 throttle，很多好的控制了resize事件的调用频度。

debounce

debounce和throttle很像，debounce是空闲时间必须大于或等于 一定值的时候，才会执行调用方法。debounce是空闲时间的间隔控制。比如我们做autocomplete，这时需要我们很好的控制输入文字时调用方法时间间隔。一般时第一个输入的字符马上开始调用，根据一定的时间间隔重复调用执行的方法。对于变态的输入，比如按住某一个建不放的时候特别有用。

debounce主要应用的场景比如：

• 文本输入keydown 事件，keyup 事件，例如做autocomplete

这类网上的方法有很多，比如就对throttle和debounce进行封装。jQuery也有一个throttle和debounce的插件：，所有的原理时一样的，实现的也是同样的功能。再奉上一个自己一直再用的throttle和debounce控制函数：

/* * 频率控制 返回函数连续调用时，fn 执行频率限定为每多少时间执行一次 * @param fn {function}  需要调用的函数 * @param delay  {number}    延迟时间，单位毫秒 * @param immediate  {bool} 给 immediate参数传递false 绑定的函数先执行，而不是delay后后执行。 * @return {function}	实际调用函数 */var throttle = function (fn,delay, immediate, debounce) {    var curr = +new Date(),//当前事件        last_call = 0,        last_exec = 0,        timer = null,        diff, //时间差        context,//上下文        args,        exec = function () {            last_exec = curr;            fn.apply(context, args);        };    return function () {        curr= +new Date();        context = this,        args = arguments,        diff = curr - (debounce ? last_call : last_exec) - delay;        clearTimeout(timer);        if (debounce) {            if (immediate) {                timer = setTimeout(exec, delay);            } else if (diff >= 0) {                exec();            }        } else {            if (diff >= 0) {                exec();            } else if (immediate) {                timer = setTimeout(exec, -diff);            }        }        last_call = curr;    }};/* * 空闲控制 返回函数连续调用时，空闲时间必须大于或等于 delay，fn 才会执行 * @param fn {function}  要调用的函数 * @param delay   {number}    空闲时间 * @param immediate  {bool} 给 immediate参数传递false 绑定的函数先执行，而不是delay后后执行。 * @return {function}	实际调用函数 */var debounce = function (fn, delay, immediate) {    return throttle(fn, delay, immediate, true);};

demo：

更多阅读：

声明: 本文采用  协议进行授权 |