防抖和节流的区别及应用场景

833字
4分钟
2024-07-18
- 技术

在前端开发中，为了提升性能和用户体验，我们常常需要对频繁触发的事件进行控制。防抖（Debounce）和节流（Throttle）是两种常用的技术手段。本文将详细介绍防抖和节流的概念、区别及其在实际开发中的应用场景。

防抖（Debounce）

防抖是一种控制函数调用频率的技术，当某个事件持续触发时，防抖会延迟函数的执行，直到事件停止触发一段时间后再执行函数。如果在延迟期间事件再次触发，则重新计时。

示例代码

1
function debounce(func, wait) {
2
  let timeout;
3
  return function (...args) {
4
    clearTimeout(timeout);
5
    timeout = setTimeout(() => {
6
      func.apply(this, args);
7
    }, wait);
8
  };
9
}
10

11
// 应用防抖
12
const handleResize = debounce(() => {
13
  console.log("Window resized");
14
}, 300);
15

16
window.addEventListener("resize", handleResize);

在上述代码中，handleResize 函数只有在窗口大小调整停止 300 毫秒后才会被执行一次。

节流（Throttle）

节流也是一种控制函数调用频率的技术，但与防抖不同的是，节流会保证在一定时间间隔内函数只执行一次，不管事件在此时间间隔内触发了多少次。

示例代码

1
function throttle(func, delay) {
2
  let lastCall = 0;
3
  return (...args) => {
4
    const now = new Date().getTime();
5
    if (now - lastCall < delay) {
6
      return;
7
    }
8
    lastCall = now;
9
    return func(...args);
10
  };
11
}
12

13
// 应用节流
14
const handleScroll = throttle(() => {
15
  console.log("Window scrolled");
16
}, 300);
17

18
window.addEventListener("scroll", handleScroll);

在上述代码中，handleScroll 函数在窗口滚动时每隔 300 毫秒执行一次。

防抖和节流的区别

触发方式：
- 防抖：在事件停止触发一段时间后才执行函数。
- 节流：在一定时间间隔内只执行一次函数。
应用场景：
- 防抖：适用于需要在用户停止输入或操作后才进行处理的场景，如搜索框自动补全、表单验证。
- 节流：适用于需要在一段时间内只执行一次的场景，如窗口滚动事件、按钮防止多次点击。