如何将JavaScript中的函数防抖和节流技术结合应用？

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

函数防抖和节流都是对高频动作进行调优的方法，实现方式上有类似之处。首先从使用场景进行划分。

防抖使用场景：- 表单输入框校验- 提交按钮防止重复提交- 窗口大小变化时的操作

节流使用场景：- 滚动事件- 按钮点击- 鼠标移动

防抖：在事件被触发n秒后才执行，如果在这n秒内事件再次被触发，则重新计时。

节流：在固定时间内只执行一次，如果在这段时间内事件被触发多次，只有第一次有效，其余的触发将被忽略。

函数防抖和节流都是对高频动作触发回调函数的一个优化，实现方式上有类似之处。先从使用场景做个区分。

防抖使用场景：

• 表单输入框校验
• 提交按钮避免重复提交
  

节流使用场景：

• scroll,mousemove,resize等
  

函数防抖（debounce）

表单输入框校验在用户不停的打字输入时并不需要向后台校验文本，只有当用户停下来一定时间后，这时候默认用户已经输入完毕了可以开始向后台提交文本了。

表单的提交按钮被用户多次连续点击时，显然并不需要每次点击都提交表单。仅在用户不点击之后，把最后一次的点击操作执行即可。