JavaScript防抖和节流

前言

debounce(防抖)和throttle(节流)是两个相似的技术，都是为了减少一个函数无用的触发次数，以便提高性能或者说避免资源浪费。

debounce(防抖)

概念：任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行，否则则重新计时。

demo1.png
代码运行效果： demo.gif
结合上面的代码，我们可以了解到，在触发点击事件后，如果用户再次点击了，我们会清空之前的定时器，重新生成一个定时器。意思就是：这件事儿需要等待，如果你反复催促，我就重新计时！
使用场景：

• search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
• window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

throttle(节流)

概念：指定时间间隔内只会执行一次任务。

demo2.png
代码运行效果： demo1.gif
使用场景：

• 鼠标不断点击触发，mousedown(单位时间内只触发一次)
• 监听滚动事件，比如是否滑到底部自动加载更多，懒加载，用throttle来判断

参考

防抖和节流的应用场景和实现

代码地址