防抖模式

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

立即防抖

当持续触发事件的时候，事件处理函数会立即执行，然后不再执行事件处理函数，直至最后一次事件触发之后的一段时间后才允许再次执行事件处理函数。 实现思路：判断是否存在定时器，没有则执行事件处理函数，然后无论是否已经存在定时器都需要重设定时器。

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

window.onscroll = debounce(300, a => console.log(a), 1)

非立即防抖

当持续触发事件的时候，事件处理函数是完全不执行的，等最后一次触发结束的一段时间之后，再去执行。最常见的例子就是搜索建议功能，当用户进行持续输入时，并不会请求服务器进行搜索建议的计算，直至用户输入完成后的N 毫秒后才会将数据传输至后端并返回搜索建议。 实现思路：每次触发事件时都取消之前的延时调用方法并重设定时器。

function debounce(wait, funct, ...args) {
  let timer = null
  return () => {
    clearTimeout(timer)
    timer = setTimeout(() => funct(...args), wait)
  }
}

window.onscroll = debounce(300, a => console.log(a), 1)