日常的例子说明 throttle 和 debounce 的区别

不小心接触到 throttle 和 debounce，按捺不住猎奇的心理，找这两个函数的资料。

然而百度到的各种对他们的理解，我去啊。

艰难地搞明白他们是干嘛的之后，忍不住举个例子说说自己的理解，希望我的介绍能够简单到任何人(hr?)都能看懂。

 

首先，我们明确一下这两个函数的中文含义：

throttle: 频率控制

debounce: 空闲控制

 

栗子来了：

现在有一个输入框，用户正在输入一些文字，然后需要根据用户的输入向服务器发送请求。

假使用户正在疯狂码字中 ：！@#￥%……&*（）——+

throttle 策略下，每隔一定时间，我们就设为 500ms 吧，即：每 500ms ，都会向服务器发送一次请求。500ms 发一次，我们控制了函数调用的频率，这就是频率控制(throttle)。

debounce 策略下，用户疯狂码字的时候是不会发送 ajax 请求的，而一旦用户手累了，或者输入完成了，空闲了 500ms 没码字，此时我们的 ajax 请求才会发送了出去。事件一直在进行，直到空闲了 500ms 才触发我们的函数，这就是空闲控制(debounce)。