回到课程

去抖装饰器

重要程度: 5

debounce(f, ms)装饰器的结果应该是一个包装器,它每隔几毫秒调用一次 f

换句话说,当我们调用 “debounced” 函数时,它保证将忽略最接近的 “ms” 内发生的情况。

例如:

let f = debounce(alert, 1000);

f(1); // 立即执行
f(2); // 忽略

setTimeout( () => f(3), 100); // 忽略 (只过去了12 ms)
setTimeout( () => f(4), 1100); // 运行
setTimeout( () => f(5), 1500); // 忽略 (离最后一次执行不超过1000 ms)

在实践中,当我们知道在如此短的时间内没有什么新的事情可以做时,debounce 对于那些用于检索/更新的函数很有用,所以最好不要浪费资源。

打开带有测试的沙箱。

function debounce(f, ms) {

  let isCooldown = false;

  return function() {
    if (isCooldown) return;

    f.apply(this, arguments);

    isCooldown = true;

    setTimeout(() => isCooldown = false, ms);
  };

}

debounce 的调用返回一个包装器。可能有两种状态:

  • isCooldown = false —— 准备好执行
  • isCooldown = true —— 等待时间结束

在第一次调用 isCooldown 是假的,所以调用继续进行,状态变为 true

isCooldown 为真时,所有其他调用都被忽略。

然后 setTimeout 在给定的延迟后将其恢复为 false

使用沙箱的测试功能打开解决方案。