回到课程

去抖装饰者

重要程度: 5

debounce(f, ms) 装饰者的结果应该是一个包装器,该包装器最多允许每隔 ms 毫秒将调用传递给 f 一次。

换句话说,当我们调用 “debounced” 函数时,它保证之后所有在距离上一次调用的时间间隔少于 ms 毫秒的调用都会被忽略。

例如:

let f = debounce(alert, 1000);

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

setTimeout( () => f(3), 100); // 被忽略(只过去了 100 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 —— 等待时间结束。

在第一次调用时,isCooldownfalse,因此调用继续进行,状态变为 true

isCooldowntrue 时,所有其他调用都被忽略。

然后 setTimeout 在给定的延时结束后,将其恢复为 false

使用沙箱打开解决方案。