debounce和throttle是js事件执行中的两个比较类似的降频概念,它们在特定的时候有特定的用途,它们的核心思想都是降低密集事件,但是又不太一样。

应用场景

所有的概念方法都是为了解决切实的场景而提出的,现在我们看看这两个概念最典型的应用场景:

现在很多的搜索框都有及时搜索的功能,就是你刚输入了几个字,没有输完,下面就会出现搜索内容。如果按照一般思路,我们监听input事件,用户每输入一个字我们就去后台请求接口,但是这样很浪费,假如用户输入的非常快的话,一瞬间会有很多ajax请求,这样就不太好了,这个时候就要用debounce来降低请求的频率。

background Layer 1 一个响应来了,定时200ms之后执行,如果200ms内有新的响应, 取消之前的定时,并开始新的200ms定时。 200ms 200ms A B 200ms C (cancel) (cancel) (do) 最后执行的为C

上面就是debounce概念的运行事例,第一个请求A进来了,先定时200ms之后执行,100ms的时候,B来了,取消A的定时任务,B在110ms的时候,C来了,取消B,最后C在200ms之后执行。

上面讲完了debounce的主要用途,对于throttle来说,就不太一样了。throttle最主要解决的就是window.onscroll事件高频率问题,假如window.onscroll要处理一个很复杂的事情,那么一旦用户滚动页面,就会触发非常多的执行,有可能会导致页面卡顿,这个时候就要用throttle了。

background Layer 1 一个响应来了,立马执行,如果200ms内有其他响应,丢弃。 200ms A B A,C执行,B,D,E丢弃 (执行) (丢弃) 200ms C D (执行) (丢弃) E (丢弃)

上图一共来了5个请求,最后只执行了A,C,throttle的执行有点类似于锁的概念,一个请求来了,锁定200ms,200ms内来的请求全部丢弃,200ms之后可以来新的请求。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字