🦄 2024 独立开发者训练营,一起创业!查看介绍 / 立即报名(剩余10个优惠名额) →

用 Throttle 与 Debounce 限制调用函数

在应用里有些功能(函数)你希望限制它的执行。比如一个实时搜索功能,用户在搜索框里输入想要找的东西,可以实时地显示搜索结果。这个功能我们可能要去监听搜索框里的 change 或者 input 事件,发生变化以后就去请求搜索。但是我们不希望每次有一点点变化就去执行搜索,这就需要使用 Throttle 或 Debounce 去限制一下这个搜索功能的执行。

Throttle 与 Debounce 都可以限制函数的执行,但是有一点区别。

Throttle

Throttle:函数在每个等待间隔时间里最多只能执行一次。使用 Throttle 的时候,可以提供一个要执行的函数,还要一个等待时长。比如我们要执行的函数是 search,等待的时长是 1000ms ,这样 search 这个函数在 1000ms 以内,最多就只能被调用一次。

Debounce

Debounce:直到从上一次 Debounce 函数被执行以后再经过一个设置的等待的时间以后,才会执行 Debounce 函数。就是我们设置个等待时间,这个时间过了以后才能调用函数,接着想要再次调用这个函数必须还要经过从上一次调用函数以后,再经过设置的等待时间以后才行。

创建 Throttle 与 Debounce 函数

Lodash 这个库里的 throttle 与 debounce 可以帮我们创建 Throttle 与 Debounce 函数。

微信好友

用微信扫描二维码,
加我好友。

微信公众号

用微信扫描二维码,
订阅宁皓网公众号。

240746680

用 QQ 扫描二维码,
加入宁皓网 QQ 群。

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点