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

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

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

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

throttle: 频率控制

debounce: 空闲控制

栗子来了:

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

假使用户正在疯狂码字中 :!@#¥%……&*()——+

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

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

05-11 15:39