手写javescript的防抖与节流函数

防抖函数

短时间内多次触发同一事件，只执行最后一次，或者只执行最开始的一次，中间的不执行

立即执行的防抖函数是指触发后，立刻执行函数，然后time秒内不触发事件才能继续执行函数

/**
 * 防抖函数
 * @param {Function} fn 函数
 * @param {number} time 延迟执行毫秒数
 * @param {boolean} immediate 是否立刻执行函数
 */
function debounce(fn, time, immediate) {
  let timer; // 1
  let flag = false; // 2
  return function () {
    if (timer) { // 3
      clearTimeout(timer);
    }
    if (!flag && immediate) { // 4
      flag = true;
      fn.apply(this,arguments);
    }
    timer = setTimeout(() => { // 5
      fn.apply(this,arguments);
    }, time);
  };
}

详细过程

1. 初始化闭包变量timer用于记录定时器
2. 初始化闭包变量flag用于判断是否立刻执行过函数
3. 如果当前存在定时器，则清除
4. 如果未第一次执行过函数并且需要立刻执行，则执行函数，并flag设置为true
5. 采用定时器执行函数，并记录定时器

节流函数

指连续触发事件但是在 n 秒中只执行一次函数。即 2n 秒内执行 2 次… 。节流如字面意思，会稀释函数的执行频率。

/**
 * 节流函数
 * @param {function} fn 函数
 * @param {number} time 执行函数的时间间隔(毫秒)
 * @returns
 */
function throttle(fn, time) {
  let timer; // 1
  return function () {
    if (!timer) { // 2
      timer = setTimeout(() => {
        timer = null; // 3
        fn.apply(this, arguments); // 4
      }, time);
    }
  };
}

详细过程

1. 初始化闭包变量timer用于记录定时器
2. 如果当前timer不存在才执行
3. 执行函数后清空timer
4. 执行函数，并注意this指向问题

注意：debounce与throttle均采用了闭包，需要注意this的指向问题