# JavaScript Debounce

防抖通俗的来说就是多次合并为一次 debounce(防抖)，简单来说就是防止抖动。

当持续触发事件时，debounce会合并事件且不会去触发事件，当一定时间内没有触发再这个事件时，才真正去触发事件

非立即执行版的意思是触发事件后函数不会立即执行，而是在n秒后执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

//思路 先清除再定义
const debounce = (func, wait, ...args) => {
  let timeout;
  return function(){
    if (timeout) clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(context, args)
    }, wait);
  }
}

立即执行版的意思是触发事件后函数会立即执行，然后n秒内不触发事件才能继续执行函数的效果。

const debounce = (func, wait, ...args) => {
  let timeout;
  return function(){
    const context = this;
    if (timeout) cleatTimeout(timeout);
    let callNow = !timeout;
    timeout = setTimeout(() => {
      timeout = null;
    }, wait)
    
    if(callNow) func.apply(context,args)
   }
}

实际运用

1.对于按钮防点击来说的实现：一旦我开始一个定时器，只要我定时器还在，不管你怎么点击都不会执行回调函数。一旦定时器结束并设置为 null，就可以再次点击了。

2.就是用于input输入框架的格式验证 3.提交按钮的点击事件 4.实时搜索 6.给按钮加函数防抖防止表单多次提交 7.对于输入框连续输入进行AJAX验证时，用函数防抖能有效减少请求次数 8.判断scroll是否滑到底部，滚动事件+函数防抖

总的来说，适合大量事件按时间做平均分配触发。

其他

按一个按钮发送 AJAX：给 click 加了 debounce 后就算用户不停地点这个按钮，也只会最终发送一次；如果是 throttle 就会间隔发送几次
监听滚动事件判断是否到页面底部自动加载更多：给 scroll 加了 debounce 后，只有用户停止滚动后，才会判断是否到了页面底部；如果是 throttle 的话，只要页面滚动就会间隔一段时间判断一次

← JavaScript Throttle JavaScript 变量 →