JS学习笔记之函数防抖与节流

在日常开发中，我们经常能够碰到以下工作场景：

1. • 对提交按钮进行变态的点击压力测试
   • 输入框内容的实时校验（譬如验证用户名是否已存在）
2. • 图片滚动加载scroll操作
   • 窗口放大缩小resize操作
   • 对某一区域进行mousemove操作

上述频繁触发事件的操作,如果我们不采取任何操作，势必会造成极差的用户体验。譬如，对提交按钮连续点击发起请求，会给服务器带来压力；窗口放大缩小，会连续触发浏览器的resize函数，如果涉及到大量的dom操作，势必又会引起页面的回流与重绘，有可能会让页面变得卡顿等等。
如果我们不想频繁的触发某一事件，这时候就可以考虑用函数防抖、函数节流了。

函数防抖(debounce)

原理：在规定的时间t内,如果连续触发某一事件，则不会调用事件回调函数；连续触发某一事件，t时间内，不再触发该事件，则执行事件回调函数。
我们以连续点击提交按钮为例：

• 正常操作：

提交

demo01.gif

在短时间内，我们对提交按钮连续点击，可以看到连续的请求被发起，我想这个时候后端的同事应该会泪流满面吧。

• 使用防抖

提交

demo02.gif

我们可以观察到，连续点击提交按钮，并没有执行请求；隔了1s后，执行请求（也就是在这1s内，没有点击提交按钮），这样就很好的解决了我们的烦恼。

• 防抖之立即执行
  上述的防抖函数，已经可以解决我们大部分场景下的问题，但有一个需要注意的点：点击该提交按钮，需要等一段时间后，才会调用函数。而我们工作当中的另外一种需求为：点击后立即执行，在接下来的连续触发中，不执行事件回调函数。

提交

demo03.gif

从上图我们可以观察到：第一次点击，请求被执行，后续连续的点击操作都不被执行；等过了1s后，再次点击，请求被执行。

函数节流(throttle)

原理：连续触发某一事件，会固定每隔一段时间执行一次事件回调函数(区别于防抖的连续触发，不执行事件回调函数)
这里，我们以mousemove事件举例：

• 正常操作

demo04.gif

可以看到，我们的小鼠标，轻轻一划，连续触发了不知道多少次 mousemove事件，如果这里涉及到复杂的ajax操作，那又要悲剧了，ε(┬┬﹏┬┬)3！

• 节流之时间戳实现