javascript - 了解 RxJS 去抖语义

Question

来自 this article :

 const debouncedInput = example.debounceTime(5);

 const subscribe = debouncedInput.subscribe(val => {
   console.log(`Debounced Input: ${val}`);
 });

在第一个 keyup 之后，debouncedInput 会等待 5 毫秒来调用观察者吗？

还假设用户在 5 毫秒间隔到期之前继续键入。 debouncedInput Observable 是否在发布事件/源值之前等待不间断的 5 毫秒？

举个例子(根据@OJKwon 的回答中非常有用的弹珠图)假设 - 代表一毫秒。我们有以下内容:

 -a--b--c-------d

在这种情况下，监视间隔的计时器将在以下时间重新启动:

• 键入 a 时 2 毫秒
• 输入 b 时 5 毫秒
• 输入 c 时 8 毫秒
• 9、10、11、12、13 毫秒通过
• abc 在 13 毫秒时发出，因为那段时间没有其他事件
• 当 d 在 14 毫秒时被键入时，计时器再次启动
• abcd 在 19 毫秒时发出，因为没有输入其他值

Answer 1

debounceTime 运算符所做的是将源可观察发射延迟指定的时间范围。如果在延迟期间发出另一个源值:

• 丢弃之前的值
• 重置间隔计时器
• 等待查看间隔是否会过去而不会发出更多源值。
• 最后，如果在间隔期间没有发出任何值，它将发出最后一个值。

RxJSs marble test diagram很好地说明了这一点。让我们回顾几个案例。

当我们有source.debountTime(20)时，

1. 所有源值排放都发生在 20 年后

const source = '-a--------b-----';
const expected = '---a--------b----';


所有源值都只是简单地延迟了。

1. 如果某些源值随后在 20 毫秒内发出

const source = '-a--bc--d---|';
const expected = '---a---c--d-|';


发射 a 延迟 20 毫秒，b 下降，因为 c 在下一次发射的 20 毫秒时间跨度之前发射，然后 d 在 c 执行后延迟 20ms。

总结一下 debounceTime 运算符的功能作为速率限制器，只允许在给定的时间范围内发出单个值。