JavaScript防抖和节流
2020-01-13 本文已影响0人
agamgn
前言
debounce(防抖)和throttle(节流)是两个相似的技术，都是为了减少一个函数无用的触发次数，以便提高性能或者说避免资源浪费。
debounce(防抖)
概念：任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行，否则则重新计时。
demo1.png
代码运行效果：
demo.gif
结合上面的代码，我们可以了解到，在触发点击事件后，如果用户再次点击了，我们会清空之前的定时器，重新生成一个定时器。意思就是：这件事儿需要等待，如果你反复催促，我就重新计时！
使用场景：
- search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
- window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次
throttle(节流)
概念：指定时间间隔内只会执行一次任务。
demo2.png
代码运行效果：
demo1.gif
使用场景：
- 鼠标不断点击触发，mousedown(单位时间内只触发一次)
- 监听滚动事件，比如是否滑到底部自动加载更多，懒加载，用throttle来判断
