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

时间:2017-03-04 16:41:26

标签: rxjs rxjs5

我有一个表单,用户可以在textarea中输入markdown格式的文本。我希望在该字段旁边显示解析标记的准实时预览。

与StackOverflow问题表格完全一样。 ; - )

textarea的值是通过RxJS Observable发出的,但我不想刷新每个新值的预览。相反,我只想在用户停止输入500ms 之后才刷新预览

这里是一个试验性的图表(第一行是textarea在用户输入时发出的原始值,第二行是我想要获得的; 一个值只发出一次特定的延迟没有排放已经过去):

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

实现此目的的语法是什么?

2 个答案:

答案 0 :(得分:1)

我建议您在UX方面使用 auditTime 作为用例。

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

但是,在 auditTime 中,只要存在类型事件,就会为每个时间间隔生成准预览。

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

  

auditTime和debounceTime都会在初始化时启动计时器   事件进来。两人都会在他们之前等待给定的时间   发出一个事件。区别在于debounceTime重置计时器   只要有新事件进入,而auditTime没有。 auditTime会   在给定的毫秒数后发出最近的事件   是否还在接收事件。 debounceTime会等待   在事件中的差距。你说你只读了文档   仔细检查我发现这个文件特别有帮助。

我发现一些有用的参考文献。

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

Difference between audit and debounce in rxjs?

答案 1 :(得分:0)

您可以使用debounceTime() operator

您也可以使用distinctUntilChanged()对其进行链接,以避免在用户添加两个字符并删除它们时重新计算HTML