【JavaScript】面试手撕防抖

// 基本版防抖函数（不支持立即执行）
// 第一个参数是需要进行防抖处理的函数，第二个参数是延迟时间
function debounce(func, delay) {
  let time; // 创建一个变量用于保存计时器
  // 防抖函数返回的是另外一个函数，该函数才是被调用的函数
  return function(...args) {
    // 如果存在定时器则清除它
    if (time){
      clearTimeout(time); 
    }
    // 重新设置一个新的定时器，当延迟时间过后执行真正的回调函数
    time = setTimeout(() => {
      func.apply(this, args); // 使用apply确保上下文和参数正确传递给回调函数
    }, delay);
  };
}
// 使用防抖函数
const myDebouncedFunction = debounce(function(inputValue) {
  console.log('Input value after debounce:', inputValue);
}, 500); // 设置延时为500毫秒
// 假设这是绑定了input元素的onChange事件
document.getElementById('myInput').addEventListener('input', function(event) {
  myDebouncedFunction(event.target.value);
});

// 支持立即执行的防抖函数
function debounce(func, delay, immediate = false) {
  let time;
  // 使用callNow闭包变量用来记录是否立即执行, 默认为false
  let callNow;
  return function(...args) {
    if (time) clearTimeout(time);
    // 当是第一次触发，并且需要触发第一次事件
    if (immediate && !callNow) {
      func.apply(this, args);
      // callNow设置为true，这样不会影响到后面频繁触发的函数调用
      callNow = true;
    } else {
      callNow = false;
      time = setTimeout(() => {
        func.apply(this, args);
        // 当定时器里的函数执行时，也就是说是频繁触发事件的最后一次事件
        // 将callNow设置为false，这样下一次的第一次触发事件才能被立即执行
        callNow = null;
      }, delay);
    }
  };
}