函数防抖和节流(让事件执行一次)

函数防抖（debounce）

当一个动作连续触发，只执行一次

常见应用场景

1. 搜索框搜索输入。只需用户最后一次输入完，再发送请求
2. 手机号、邮箱验证输入检测
3. 窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。
4. 只需要请求一次接口

实现原理

非立即执行（在n秒内执行最后一次）

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

立即执行（在n秒内执行第一次）

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

函数节流（throttle）

限制一个函数在一定时间内值执行一次

常见应用场景

1. 滚动加载，加载更多或滚到底部监听
2. 谷歌搜索框，搜索联想功能
3. 高频点击提交，表单重复提交

实现原理

时间戳版

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

定时器版

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