节流和防抖

Posted 2021-01-28 gwf93

let last = 0, timer = null; // 把上次触发事件和定时器存在全局

/**
 * 防抖
 * @param fn
 * @param delay
 * @returns {Function}
 */
debounce=(fn, delay)=>{
  // let timer = null;
  // 将debounce处理结果当作函数返回
  return function () {
    // 保留调用时的this上下文
    let context = this
    // 保留调用时传入的参数
    let args = arguments

    // 每次事件被触发时，都去清除之前的旧定时器
    if(timer) {
      clearTimeout(timer)
    }
    // 设立新定时器
    timer = setTimeout(function () {
      fn.apply(context, args)
    }, delay)
  }
}
/**
 * 节流
 * @param fn
 * @param interval
 * @returns {Function}
 */
throttle=(fn, interval)=>{
  // 将throttle处理结果当作函数返回
  return function () {
    // 保留调用时的this上下文
    let context = this
    // 保留调用时传入的参数
    let args = arguments
    // 记录本次触发回调的时间
    let now = +new Date()

    // 判断上次触发的时间和本次触发的时间差是否小于时间间隔的阈值
    if (now - last >= interval) {
      // 如果时间间隔大于我们设定的时间间隔阈值，则执行回调
      last = now;
      fn.apply(context, args);
    }
  }
}

/**
 * 节流防抖结合
 * @param fn
 * @param delay
 * 用 Throttle 来优化 Debounce
 */
throttle=(fn, delay)=>{
  // 将throttle处理结果当作函数返回
  return function(){
    // 保留调用时的this上下文
    let context = this;
    // 保留调用时传入的参数
    let args = arguments;
    // 记录本次触发回调的时间
    let now = +new Date()

    // 判断上次触发的时间和本次触发的时间差是否小于时间间隔的阈值
    if(now - last < delay){
      console.log("不触发")
      clearTimeout(timer)
      timer = setTimeout(function(){
        last = now;
        fn.apply(context, args);
      }, delay)
    }else{
      console.log("触发")
      // 如果时间间隔超出了我们设定的时间间隔阈值，那就不等了，无论如何要反馈给用户一次响应
      last = now
      fn.apply(context, args)
    }
  }
}