手写防抖与节流：让你轻松应对点击风暴

前端

2024-02-04 18:21:00

# 文本:

手写防抖与节流：优化用户体验的利器

在前端开发中，我们经常会遇到这样的场景：当用户在短时间内连续触发某个事件（如按钮点击、鼠标移动等）时，我们希望能够对这些事件进行一定程度的控制，避免对后端服务器造成过大的压力，同时也能够优化用户体验。这就是防抖函数和节流函数的用武之地了。

防抖函数

防抖函数的原理很简单：当一个事件被触发时，防抖函数会创建一个延迟执行的函数，并在一定时间内（通常是几百毫秒）内等待其他事件的触发。如果在等待时间内事件再次触发，则重新计算等待时间，直到等待时间结束时才执行函数。

节流函数

节流函数的原理与防抖函数相似，但也有所不同。节流函数不会在等待时间内重新计算等待时间，而是在等待时间结束后才执行函数。因此，节流函数可以确保在一定时间内函数只被执行一次。

手写防抖函数和节流函数

我们可以使用JavaScript来手写防抖函数和节流函数。以下是两个函数的实现代码：

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

// 节流函数
function throttle(fn, delay) {
  let lastTime = 0;
  return function () {
    let now = Date.now();
    if (now - lastTime > delay) {
      fn.apply(this, arguments);
      lastTime = now;
    }
  };
}