JavaScript debounce防止用户重复提交

例。

页面有一按钮，点击一次可以触发一个 Ajax 请求。如果不做特殊处理，那么，用户快速点击时就会触发大量 Ajax 请求，给服务器带来不必要的负担。

处理方法有多种：

点击后禁用按钮

这是比较简单粗暴的方法，在用户第一次触发 click 事件后即禁用该按钮 – 设置 disabled 属性为 true。在处理完 Ajax 请求后，再根据情况决定是否启用该按钮。

Debounce

维基上 debounce 译成去除抖?印Ｎ颐强梢园延没а杆俚慊髟斐傻拇罅渴录?シ⒖闯伞感藕诺亩抖? – 这时触发事件处理器的信号处于不稳定状态。

debounce 方法的原理是，第一个事件触发时，对其绑定的事件函数做一定的延迟执行(setTimeout)，比如100毫秒，如果100毫秒内没有再触发事件，则我们可以认为信息稳定，事件处理器将在预计的100毫秒【当然，这个时间并不准确，有兴趣可以看 JavaScript 异步一篇的说明】，但如果100毫秒内还在触发同一事件，则上一个延迟被清除(clearTimeout)，新的延迟(setTimeout)替换进来。

于是，如果用户一直点击按钮并且两次点击的时间间隔小于100毫秒时，click 事件被持续触发，新的延迟不断替入旧的延迟，结果是事件处理器函数得不到执行。

举一个点击按钮提交 Ajax 请求的例子1：

这个方法有一个明显的缺陷，就是用户正常点击时，事件的处理也被无例外地推迟100毫秒。
throttle

throttle的定义是：

    a device controlling the flow of fuel or power to an engine.

在这里，可以简单理解成一个控制函数发生频率的机制2。

与 debounce 不同的是，throttle 方法不会延迟第一次事件的处理。它即时处理第一次事件，并记录时间，之后再发生事件，它再计算一个时间值，这个时间值表示，离第一次事件发生过去了多久，如果这个时间值小于设定的时间阀(threshold)，则利用 setTimeout 推迟事件处理，一旦到达时间阀，则即时触发事件处理。

这样，throttle 就控制住密集事件可触发事件处理器的频率，比如每200秒(threshold)仅触发一个事件函数。具体应用请见扩展阅读3中 scroll 与 resize 事件的示例。