实现防抖、节流函数

1. 防抖函数

//防抖函数让某个触发事件在n秒内只会被执行一次
function debounce(fn, delay, immediate = false) {
  // 记录定时器
  let timer = null;
  // 记录immediate的值
  let flag = immediate;

  // 不能返回箭头函数,this会指向window
  return function (...arg) {
    // 如果上一次setTimeout还没结束则直接取消
    if (timer) {
      clearTimeout(timer);
    }

    // 如果immediate为true则一开始就执行一次
    if (immediate && flag) {
      fn.apply(this, arg);
      flag = false;
    }

    // 定时器延迟执行函数
    timer = setTimeout(() => {
      //显示绑定改变this指向,保证原函数里的this不会改变
      fn.apply(this, arg);
      //函数执行完成,将timer初始化
      timer = null;
    }, delay);
  };
}

2. 节流函数

//节流函数让某个触发事件每过 n 秒会被执行一次
function throttle(fn, interval, immediate = true) {
  // 开始时间
  let startTime = 0;

  return function (...arg) {
    // 当前时间
    let nowTime = new Date().getTime();

    // immediate为false时,第一次不会立即执行
    if (!immediate && startTime === 0) {
      startTime = nowTime;
    }

    // 还需要等待的时间
    let waitTime = interval - (nowTime - startTime);

    // 等待时间小于零则执行函数
    if (waitTime <= 0) {
      fn.apply(this, arg);
      // 函数执行完毕将开始时间赋值为当前时间
      startTime = nowTime;
    }
  };
}