手写javescript的防抖与节流函数-优快云博客

本文介绍了JavaScript中的防抖(debounce)和节流(throttle)函数，通过闭包实现延迟执行和频率限制，提升性能。理解这两者有助于避免频繁操作导致的资源浪费。

防抖函数

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

立即执行的防抖函数是指触发后，立刻执行函数，然后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);
  };
}

详细过程

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

节流函数

指连续触发事件但是在 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);
    }
  };
}