节流与防抖

防抖是延迟执行，节流是间隔执行。

节流函数是在每隔一段时间就执行一次，设定xxx秒后执行事件，如果时间到了就会执行函数并重置定时器；防抖是每次触发都会重置定时器，而节流是在时间结束后才会重置定时器。

举个例子解释上面这句话： 比如说你缩放窗口，会触发一个函数执行，如果一直进行此操作，节流就会是每隔50s（定时器设定的时间）执行一次，而防抖就会在最后一次缩放（也就是停止缩放）后的50s（定时器设定的时间）执行函数。

节流函数实现原理：

function throttle(func,wait){
  let timeout = null
  return function () {
    const context = this
    const args = arguments
    if(!timeout){
      timeout = setTimeout(()=>{
        timeout = null
        func.apply(context,args)
      },wait)
    }
  }
}

只要代码是周期执行的，都可考虑使用节流

防抖函数实现原理：

function debounce(func,wait){
  let timeout = null
  return function () {
    const context = this
    const args = arguments
    if(timeout) clearTimeout(timeout)
    timeout = setTimeout(()=>{
      timeout = null
      func.apply(context,args)
    },wait)
  }
}

应用场景：比如，搜索框搜索。如果在工作中想直接使用防抖和节流方法，可以使用 Lodash.js 插件（这个插件整合很多常用的工具方法）。