理解RxJS去抖动语义

Question

来自this article：

 const debouncedInput = example.debounceTime(5);

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

第一个密钥后，debouncedInput等待调用观察者5毫秒？

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

就一个例子而言（根据@OJKwon的答案中非常有用的大理石图）假设-代表一毫秒。我们有以下内容：

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

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

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

Answer 1

debounceTime运算符的作用是在指定的时间范围内延迟源可观察发射。如果在延迟期间发出另一个源值：

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

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

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

1. 所有源值发射都发生在20
之后

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

所有源值都只是被延迟了。

1. 如果某个源值随后在20ms内发出

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

发出a的时间延迟了20毫秒，b在下一次发射的时间跨度为20毫秒之前发出了c，d在c后延迟了20毫秒确实

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