RxJS - 仅在特定的空闲延迟后发出

RxJS - Emit only after specific delay of idleness

我有一个表单,用户可以在其中的文本区域中输入降价格式的文本。我想在字段旁边显示 准实时 预览 parsed markdown。

与 Whosebug 问题表单完全一样。 ;-)

textarea 的值通过 RxJS Observable 发出,但我不想为每个新值刷新预览。相反,我想仅在用户停止输入 500 毫秒后 刷新预览

这是一个暂定图(第一行是文本区域在用户键入时发出的原始值,第二行是我想要获得的值;一个值仅在特定延迟后发出一次WITH NO EMISSION 已过去):

t---t--ttt------tt-ttt------t---|
----------------t-----------t---|

实现这个的语法是什么?

您可以只使用 debounceTime() operator

您也可以将其与 distinctUntilChanged() 链接起来,以避免在用户添加和删除两个字符时重新计算 HTML

对于用户体验方面的用例,我会推荐 auditTime

如果用户连续输入,然后使用 debounceTime,准预览将在暂停之前不会生成。

然而,在auditTime中,只要有类型事件,每个时间间隔都会生成准预览。

我相信 auditTime 提供了更好的用户体验。

Both auditTime and debounceTime will initially start a timer when an event comes in. Both will wait the given amount of time before they emit an event. The difference is that debounceTime resets the timer whenever a new event comes in while auditTime does not. auditTime will emit the most recent event after the given number of milliseconds whether or not it is still receiving events. debounceTime will wait for a gap in the events. You said you read the documentation but just to double check I have found this document particularly helpful.

一些我觉得有用的参考资料。

https://medium.com/@jvdheijden/rxjs-throttletime-debouncetime-and-audittime-explained-in-examples-c393178458f3