一、防抖

1.1、原理

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时

1.2、适用场景

1.2.1、按钮提交场景

防止多次提交按钮，只执行最后一次提交

1.2.2、搜索框联想

防止联想发送请求，只发送最后一次输入

1.3、实现

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

二、节流

2.1、原理

规定在一个单位时间内，只能触发一次函数，如果这个单位时间内触发多次函数，只有一次生效

2.2、适用场景

2.2.1、拖拽场景

固定时间内只执行一次，防止超高频次触发位置变动

2.2.2、缩放场景

监控浏览器resize

2.3、实现

function throttle(func,wait){
    let context,args
  let previous = 0
  return function (){
      let now = +new Date()
    context = this
    args = arguments
    if(now - previous > wait){
        func.apply(context,args);
      previous = now
    }
  }
}