如何将【跟着大佬学JavaScript】之防抖技术改写成长尾词？

本文共计1603个文字，预计阅读时间需要7分钟。

主题：channing-cyan 高亮：ascetic前言：在前端开发中会遇到一些频繁的事件触发，例如：- window 的 resize、scroll、mousedown、mousemove、mousewheel（鼠标滚轮）- keyup（弹起键盘）- keydown（按下键盘）

---

theme: channing-cyan
highlight: ascetic 前言

在前端开发中会遇到一些频繁的事件触发，比如：

1. window 的 resize、scroll
2. mousedown、mousemove、mousewheel(鼠标滚轮)
3. keyup(弹起键盘)、keydown(按下键盘)、keypress(按下字符键盘)
   ……

想象一下窗口的resize事件或者是一个元素的onmouseover事件 - 他们触发时，执行的非常迅速，并且触发很多次。如果你的回调过重，你可能使浏览器死掉。

这就是为什么要使用防抖。

原理

防抖的原理：在wait时间内，持续触发某个事件。第一种情况：如果某个事件触发wait秒内又触发了该事件，就应该以新的事件wait等待时间为准，wait秒后再执行此事件；第二种情况：如果某个事件触发wait秒后，未再触发该事件，则在wait秒后直接执行该事件。

通俗一点：定义wait=2000，持续点击按钮，前后点击间隔都在2秒内，则在最后一次点击按钮后，等待2秒再执行func方法。如果点击完按钮，2秒后未再次点击按钮，则2秒后直接执行func方法。