手撕防抖节流那些事儿

前端

2023-09-13 21:40:33

防抖与节流

防抖和节流是JavaScript中常用的两种事件处理技巧，它们可以帮助开发者优化代码的性能，提高用户体验。

防抖

防抖（debounce）是一种技术，它可以限制函数在指定的时间间隔内只执行一次。也就是说，如果函数在指定的时间间隔内被多次触发，它只会执行最后一次。

防抖通常用于处理用户输入事件，比如表单输入、搜索框输入等。在这些场景中，我们通常不希望函数在用户每次输入时都执行，而是希望它在用户输入一段时间后才执行。这样可以避免不必要的函数调用，提高代码的性能。

节流

节流（throttle）是一种技术，它可以限制函数在指定的时间间隔内最多执行一次。也就是说，如果函数在指定的时间间隔内被多次触发，它只会执行第一次。

节流通常用于处理高频事件，比如页面滚动、鼠标移动等。在这些场景中，我们通常不希望函数在每次事件触发时都执行，而是希望它在一定的时间间隔内只执行一次。这样可以避免不必要的函数调用，提高代码的性能。

手撕防抖与节流

我们可以自己实现防抖和节流函数，而不需要借助于第三方库。下面是手撕防抖和节流函数的实现代码：

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

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