一张图搞清楚防抖和节流的区别

1、防抖（debounce）

指在时间n内，函数被触发多次，但是只执行一次，执行最新的触发。也就是在时间n内，碰到新的触发，就清除之前的，重新计时。

最简单的实现

function debounce(func, wait) { var timeout; return function () { clearTimeout(timeout) timeout = setTimeout(func, wait); } }

修改this指向的

function debounce(func, wait) { var timeout; return function () { var context = this; clearTimeout(timeout) timeout = setTimeout(function(){ func.apply(context) }, wait); } }

2、节流（throttle）

当持续触发某个事件时，会有规律的每隔时间n就执行一次函数。

最简单的实现

function throttle(func, wait) { var context, args; var previous = 0; return function() { var now = +new Date(); context = this; args = arguments; if (now - previous > wait) { func.apply(context, args); previous = now; } // 时间没到，啥都不干 } }

3、区别

对新触发执行的时间点不一样

上面的示例均为延迟防抖和延迟节流，特点在于执行时间点在周期最后。相对应的有前缘debounce和前缘throttle，这个执行时间点是立即执行的，对应上图中的1节点，之后的触发还是按照上图来，debounce的第二次执行会在停止触发之后的1s执行，throttle会在1s之后看有没有新的触发。

文中代码来自于：

JavaScript专题之跟着 underscore 学防抖 JavaScript专题之跟着 underscore 学节流