函数节流与函数防抖：速率限制的利刃

javascript

2024-03-17 03:21:17

函数节流与防抖：速率限制的两把利刃

引言

在现代软件开发中，速率限制是一个至关重要的概念，它能防止应用程序因过载而崩溃。函数节流 和函数防抖 是实现速率限制的两个强大技术，它们尽管名字相似，却有着截然不同的工作原理。

函数节流：按时间间隔限制调用

想象一下，你正在开发一个游戏，其中玩家可以不断按下按钮来发射子弹。为了防止玩家滥用这个功能，你可以使用函数节流来限制他们每秒发射子弹的次数。

函数节流的工作原理如下：

设置一个时间间隔： 例如，每秒限制一次子弹发射。
当函数被调用时：
- 如果上一次调用距现在的时间间隔小于设定的时间间隔，则忽略此次调用。
- 否则，执行函数。

函数防抖：只在特定时间内执行

函数防抖也有助于限制函数调用的频率，但它的工作方式与函数节流不同。它只允许在一段特定时间内执行一次函数。

函数防抖的工作原理如下：

设置一个时间间隔： 例如，每秒执行一次函数。
当函数被调用时：
- 如果上一次调用距现在的时间间隔小于设定的时间间隔，则重置计时器。
- 否则，执行函数并重置计时器。

选择正确的技术

函数节流和函数防抖都是有用的技术，但在不同的场景中使用时效果最佳：

使用函数节流： 当你需要在一定时间间隔内限制函数调用的频率时，例如，限制每秒点击按钮的次数。
使用函数防抖： 当你想在一段时间内只执行一次函数时，例如，在用户停止输入后进行搜索。

代码实现

下面代码演示了函数节流和函数防抖在 JavaScript 中的实现：

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

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