JavaScript 之函数节流

[zenglinan]

函数节流与函数防抖类似, 也是为了限制事件的频繁触发执行

不同的是: 防抖的原理是, 触发完指定时间内不触发才会执行事件, 如果一直触发就会一直刷新时间戳

节流的原理是, 指定时间执行一次事件函数

既然是指定时间触发执行一次, 那么节流就可以用至少两种方式实现: 时间戳, 定时器

时间戳版

利用当前时间减去上一次触发时间, 假如到达了设置的周期就执行

function throttle(fn, wait){
  let time = 0
  return function(){
    let now = +new Date()  // 转为数字
    let args = arguments
    if(now - time > wait){
      fn.apply(this, args)
      time = now  // 刷新time
    }
  }
}

时间戳版可以做到马上触发执行一次事件, 但假如时间周期为 3s, 在 2.8s 的时候离开, 即将可以执行(差 0.2s )的第二次事件将不能执行, 简称有头无尾。
使用方法:

app.onmousemove = throttle(xxx, 1000)

定时器版

function throttle(fn, wait) {
  let timer // 是否执行的标志位
  return function() {
    let args = arguments
      !timer && (timer = setTimeout(() => {  // timer 标志位为 falsy 时设置定时器, 将 timer 置数, 指定时间后执行事件函数, 并刷新 timer 标志位。 
      timer = null
      fn.apply(this, args)
    }, wait))
  }
}

定时器版由于事件函数是放在定时器里执行的, 所以第一次触发不能马上执行, 但是离开时, 由于定时器还在, 可以保证最后一次触发还在, 简称无头有尾。