Basic

2024年03月12日

柏拉文

越努力，越幸运

一、延迟执行版

---

思路: 利用定时器，函数第一次执行时设定一个定时器，之后调用时发现已经设定过定时器就清空之前的定时器，并重新设定一个新的定时器，如果存在没有被清空的定时器，当定时器计时结束后触发函数执行。

实现

function debounce(fn, wait, immediate) {
  let timer = null;
  return function (...args) {
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, wait);
  };
}

特点: 事件触发结束后延迟执行

二、立即执行版

---

思路: 第一次触发立即执行的功能。判断传入的 immediate 是否为 true，另外需要额外判断是否是第一次执行防抖函数，判断依旧就是 timer 是否为空，所以只要 immediate && !timer 返回 true 就执行 fn 函数，即 fn.apply(this, args)。

实现:

function debounce(fn, wait, immediate) {
  let timer = null;
  return function (...args) {
    if (timer) {
      clearTimeout(timer);
    }
    if (immediate && !timer) {
      fn.apply(this, args);
    }
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, wait);
  };
}

特点: immediate 为 true 后事件触发开始时立即执行一次，频繁触发回调结束后再延迟执行一次