手写防抖与节流助力面试临门一脚

2023-11-19 23:41:47

手写防抖与节流是JavaScript中两个非常重要的函数，它们可以帮助我们在处理事件时提高性能。防抖函数可以防止函数在短时间内被多次触发，而节流函数可以防止函数在指定时间间隔内被多次触发。

一、防抖(debounce)

防抖函数的原理是：在指定的时间间隔内，如果函数被多次触发，那么只执行最后一次触发。也就是说，如果在一个时间间隔内函数被触发多次，那么只有最后一次触发的函数会被执行。

// 防抖函数
const debounce = (func, wait) => {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
};

// 使用防抖函数
const input = document.getElementById('input');
input.addEventListener('input', debounce(() => {
  // 在输入框中输入内容后，每隔 500 毫秒触发一次函数
  console.log('input value:', input.value);
}, 500));

二、节流 (throttle)

节流函数的原理是：在指定的时间间隔内，函数只能被触发一次。也就是说，如果在一个时间间隔内函数被触发多次，那么只有第一次触发的函数会被执行。

// 节流函数
const throttle = (func, wait) => {
  let lastCall = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastCall >= wait) {
      lastCall = now;
      func.apply(this, args);
    }
  };
};

// 使用节流函数
const button = document.getElementById('button');
button.addEventListener('click', throttle(() => {
  // 按钮点击后，每隔 500 毫秒触发一次函数
  console.log('button clicked');
}, 500));