一文教你彻底学会JavaScript手写防抖节流

什么是防抖和节流

在介绍手写防抖节流之前，先来了解一下防抖和节流的概念：

• 防抖：指在短时间内多次触发同一个事件，只执行最后一次，或者只在开始时执行一次。
• 节流：指连续触发事件但是在 n 秒中只执行一次函数。即在某个时间段内，无论触发多少次事件，都只执行一次函数。

防抖和节流可以用来解决频繁触发的问题，避免资源的浪费和性能的下降。在实际开发中经常用来处理滚动、输入等频繁触发的事件。

手写防抖

实现防抖函数的常见方法是利用 setTimeout 设置延迟执行，若延迟期间该函数再次被触发，则清除之前的延迟定时器再重新延迟，直到延迟结束执行函数。

手写防抖函数的代码示例：

function debounce(fn, delay) {
  let timer = null;

  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, delay);
  };
}

该函数接收两个参数：

• fn，要执行的函数；
• delay，延迟时间间隔。

该函数返回一个新的函数，执行它相当于执行 fn 函数，但执行时已经加了防抖的限制。

手写节流

实现节流函数的常见方法是用时间戳 last 记录上一次的执行时间，每次触发时判断距离上一次执行的时间是否大于函数执行的间隔时间 wait，若大于则执行函数。

手写节流函数的代码示例：

function throttle(fn, wait) {
  let last = 0;

  return function() {
    const now = Date.now();

    if (now - last > wait) {
      fn.apply(this, arguments);
      last = now;
    }
  };
}

该函数接收两个参数：

• fn，要执行的函数；
• wait，执行间隔时间。

该函数返回一个新的函数，执行它相当于执行 fn 函数，但执行时已经加了节流的限制。

结语

防抖和节流是 JavaScript 中非常实用的两个功能，掌握它们能够帮助我们更好地处理一些特殊的事件，避免资源的浪费和性能的下降。这里给出了手写防抖节流的代码示例， 真实项目中可以根据实际需要进行调整。

示例1: 手写防抖实现表单输入验证

const input = document.querySelector('#input');
const error = document.querySelector('#error');

// 实现表单输入防抖验证（间隔500ms）
const validateInput = debounce(function(e) {
  const value = e.target.value;
  if (value.length < 6) {
    error.style.display = 'block';
  } else {
    error.style.display = 'none';
  }
}, 500);

input.addEventListener('input', validateInput);

示例2: 手写节流实现下拉刷新

function onScroll() {
  console.log('滚动事件');
}

// 实现下拉刷新节流（间隔500ms）
const onThrottleScroll = throttle(onScroll, 500);

window.addEventListener('scroll', onThrottleScroll);