前言
debounce(防抖)和throttle(节流)是两个相似的技术,都是为了减少一个函数无用的触发次数,以便提高性能或者说避免资源浪费。
debounce(防抖)
概念:任务频繁触发的情况下,只有任务触发的间隔超过指定间隔的时候,任务才会执行,否则则重新计时。

代码运行效果:

结合上面的代码,我们可以了解到,在触发点击事件后,如果用户再次点击了,我们会清空之前的定时器,重新生成一个定时器。意思就是:这件事儿需要等待,如果你反复催促,我就重新计时!
使用场景:
- search搜索联想,用户在不断输入值时,用防抖来节约请求资源。
- window触发resize的时候,不断的调整浏览器窗口大小会不断的触发这个事件,用防抖来让其只触发一次
throttle(节流)
概念:指定时间间隔内只会执行一次任务。

代码运行效果:

使用场景:
- 鼠标不断点击触发,mousedown(单位时间内只触发一次)
- 监听滚动事件,比如是否滑到底部自动加载更多,懒加载,用throttle来判断
网友评论