在应用里有些功能(函数)你希望限制它的执行。比如一个实时搜索功能,用户在搜索框里输入想要找的东西,可以实时地显示搜索结果。这个功能我们可能要去监听搜索框里的 change 或者 input 事件,发生变化以后就去请求搜索。但是我们不希望每次有一点点变化就去执行搜索,这就需要使用 Throttle 或 Debounce 去限制一下这个搜索功能的执行。
Throttle 与 Debounce 都可以限制函数的执行,但是有一点区别。
Throttle
Throttle:函数在每个等待间隔时间里最多只能执行一次。使用 Throttle 的时候,可以提供一个要执行的函数,还要一个等待时长。比如我们要执行的函数是 search,等待的时长是 1000ms ,这样 search 这个函数在 1000ms 以内,最多就只能被调用一次。
Debounce
Debounce:直到从上一次 Debounce 函数被执行以后再经过一个设置的等待的时间以后,才会执行 Debounce 函数。就是我们设置个等待时间,这个时间过了以后才能调用函数,接着想要再次调用这个函数必须还要经过从上一次调用函数以后,再经过设置的等待时间以后才行。
创建 Throttle 与 Debounce 函数
Lodash 这个库里的 throttle 与 debounce 可以帮我们创建 Throttle 与 Debounce 函数。