防抖 Debounce

什么是防抖

定义:在最后一次触发的回调函数的某个时间间隔之后,才去执行回调函数。

什么时候需要

背景:有的时候,用户需要输入关键词然后触发自动搜索,如果我们每次都去执行回调函数,会造成性能浪费,所以我们需要防抖。来使得用户的输入操作停下后的 x 秒才去执行回调函数。

如何利用已有的库来做防抖

lodash debounce

react-use useDebounce

如何自己实现

节流 Throttle

什么是节流

定义:不管有没有重复触发事件,都只会在规定的时间内执行一次回调函数。

什么时候需要

背景:有的时候,我们需要监听一个事件,比如 scroll 事件,但是这个事件会被频繁触发,如果我们每次都去执行回调函数,会造成性能浪费,所以我们需要防抖。

如何利用已有的库来做防抖

lodash throttle

react-use useThrottle

如何自己实现