防抖节流

防抖

防抖是事件被触发 n 秒后再执行回调,如果这 n 秒内事件又被触发,则重新计时

应用场景

在连续的事件，只需触发一次：

• 搜索框搜索输入，只需用户最后一次输入完，再发送请求

• 手机号，邮箱验证输入检测

• 窗口大小 resize。只需窗口调整完成后，计算窗口大小，防止重复渲染。

function debounce(fn, wait) {
  let timer = null;

  return function () {
    let context = this;
    let args = arguments;

    // if(timer){
    //     clearTimeout(timer);
    //     tiemr=null;
    // }

    // timer=setTimeout(()=>{
    //     fn.apply(context,args);
    // },wait);

    timer && clearTimeout(timer);

    timer = setTimeout(function () {
      fn.apply(context, args);
      // fn.call(context,...args);
    });
  };
}

节流

指规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行,如果在同一个单位时间内某事件被触发多次,只有一次能生效

节流可以用在 scroll 函数的事件监听上,通过事件节流来降低事件调用的频率

应用场景

间隔一段时间执行一次回调：

• 滚动加载，加载更多或滚到底部监听

• 搜索框，搜索联想功能

function throttle(fn, delay) {
  let curTime = Date.now();

  return function () {
    let context = this,
      args = arguments,
      nowTime = Date.now();

    // 如果两次时间间隔超过了指定时间，则执行函数。
    if (nowTime - curTime >= delay) {
      curTime = Date.now();
      return fn.apply(context, args);
    }
  };
}