解惑前端防抖与节流，功力大增不再慌！

2023-07-23 12:26:03

把握节奏，巧用防抖节流，让代码更灵动！

作为前端开发人员，我们经常会遇到一些棘手的问题，比如当用户在输入框中快速输入时，搜索建议会频繁触发，影响用户输入体验；或者在滚动页面时，元素的显示过于频繁，影响用户视觉效果。这些问题往往是由事件触发过于频繁造成的，严重影响了代码性能和用户体验。

防抖和节流 是解决这些问题的利器，它们可以帮助我们处理频繁触发的事件或函数，优化代码性能，提升用户体验。那么，防抖和节流究竟是什么？它们有什么异同？该如何使用？

防抖：沉着应对，从容处理高频事件

防抖是一种技术，它允许我们在一段时间内只执行最后一次事件。当事件在规定时间内连续触发时，只有最后一次事件会被执行，而前面的事件都会被忽略。这就像是在我们按下按钮后，有一个计时器开始倒计时，如果在倒计时结束前我们再次按下按钮，那么计时器就会重新开始倒计时。这样可以有效防止因事件触发过于频繁而造成的性能问题。

防抖的应用场景 非常广泛，比如：

搜索建议： 在用户输入时，防抖可以防止搜索建议过于频繁地触发，避免影响用户输入体验。
滚动加载： 在滚动页面时，防抖可以防止滚动事件过于频繁地触发，避免影响页面加载性能。
表单验证： 在用户提交表单时，防抖可以防止表单验证过于频繁地触发，避免影响用户提交体验。

代码示例：

const debounce = (func, delay) => {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
};

const input = document.getElementById('search-input');
input.addEventListener('input', debounce((e) => {
  // Perform search
}, 500));

节流：从容不迫，优雅处理连续事件

节流是一种技术，它允许我们在一定时间间隔内只执行一次事件。当事件在规定时间内连续触发时，只有第一次事件会被执行，而后续的事件都会被忽略。这就像是在我们按下按钮后，有一个闸门会打开，在闸门关闭之前，我们再次按下按钮，闸门都不会再打开。这样可以有效控制事件触发的频率，防止因事件触发过于频繁而造成的性能问题。

节流的应用场景 也十分丰富，比如：

窗口调整： 在调整窗口大小时，节流可以防止窗口调整事件过于频繁地触发，避免影响页面布局。
鼠标移动： 在鼠标移动时，节流可以防止鼠标移动事件过于频繁地触发，避免影响页面渲染性能。
视频播放： 在视频播放时，节流可以防止视频播放事件过于频繁地触发，避免影响视频播放流畅性。

代码示例：

const throttle = (func, delay) => {
  let lastCall = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastCall >= delay) {
      func.apply(this, args);
      lastCall = now;
    }
  };
};

const resizeHandler = () => {
  // Perform resize operation
};
window.addEventListener('resize', throttle(resizeHandler, 500));