# JavaScript Throttle

throttle（节流），当持续触发事件时，保证隔间时间触发一次事件。

持续触发事件时，throttle会合并一定时间内的事件，并在该时间结束时真正去触发一次事件。

在持续触发事件的过程中，函数会立即执行，并且每 1s 执行一次。

//时间戳版
const throttle = (func, wait, ...args) => {
  let pre = 0;
  return function(){
    const context = this;
    let now = Date.now();
    if (now - pre >= wait){
       func.apply(context, args);
       pre = Date.now();
    }
  }
}

在持续触发事件的过程中，函数不会立即执行，并且每 1s 执行一次，在停止触发事件后，函数还会再执行一次。

//定时器版
const throttle = (func, wait, ...args) => {
  let timeout;
  return function(){
    const context = this;
    if(!timeout){
      timeout = setTimeout(() => {
        timeout = null;
        func.apply(context,args);
      },wait)
    }
  }
}

实际运用

(页面滚动) 比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。
窗口调整 resize
抢购疯狂点击
游戏中的刷新率
Canvas画笔功能
搜索联想
射击游戏的 mousedown/keydown 事件（单位时间只能发射一颗子弹）

总的来说，适合多次事件一次响应的情况

其他

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

← JavaScript this JavaScript Debounce →