节流模式

防抖debounce与节流throttle都是控制事件处理函数执行频率的方法，当函数会进行DOM操作或者具有请求服务器等行为并且作为高频事件例如onscroll触发的事件处理函数时，就需要进行事件处理函数执行频率的控制，否则会造成大量的资源浪费致使性能下降，当然无论是防抖与节流实质上并没有减少事件触发次数，而是通过减少事件处理函数的执行次数从而提高性能。防抖节流模式不属于一般定义的23种设计模式的范畴，而通常将其看作广义上的技巧型设计模式。

当事件持续触发时，节流操作可以稀释事件处理函数执行频率，假设在1s内onmousemove事件触发了100次，通过节流就可以使得onmousemove事件的事件处理函数每100ms触发一次，也就是在1s内onmousemove事件的事件处理函数只执行10次。

时间戳实现

实现思路：通过时间戳记录上次事件处理函数执行时间，事件触发时若时间差大于执行周期则执行事件处理函数并赋值执行时间为当前时间戳。

function throttle(wait, funct, ...args) {
  let previous = 0
  return () => {
    const now = +new Date()
    if (now - previous > wait) {
      funct(...args)
      previous = now
    }
  }
}

window.onscroll = throttle(1000, a => console.log(a), 1)

定时器实现

实现思路：判断是否存在定时器，没有则执行事件处理函数并重设定时器。

function throttle(wait, funct, ...args) {
  let timer = null
  return () => {
    if (!timer) {
      funct(...args)
      timer = setTimeout(() => timer = null, wait)
    }
  }
}

window.onscroll = throttle(1000, a => console.log(a), 1)