5

I have a form where the user can enter markdown-formatted text in a textarea. I'd like to show a quasi live preview of the parsed markdown next to the field.

Exactly like the StackOverflow question form. ;-)

The values of the textarea are being emitted through an RxJS Observable but I don't want to refresh the preview for every new value. Instead I'd like to refresh the preview only after the user has stopped typing for say 500ms.

Here's a tentative diagram (first line is the raw values emitted by the textarea as the user types, second line is what I'd like to obtain; a value is emitted only once a specific delay WITH NO EMISSION has elapsed):

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

What would be the syntax to achieve this?

AngularChef
  • 13,797
  • 8
  • 53
  • 69
  • http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-debounceTime – JB Nizet Mar 04 '17 at 16:44
  • JB... Could it be as simple as that? :) – AngularChef Mar 04 '17 at 16:45
  • 1
    It can. You can also chain it with distinctUntilChanged(), to avoid recomputing the HTML if the user, for example, adds two characters and deletes them. – JB Nizet Mar 04 '17 at 16:48
  • Thanks. I feel silly for asking. I read a bunch of tutorials where they show you how to build an autocomplete field with RxJS using the `debounceTime()` operator and here I am asking this question... I'll leave it here for future reference. I'll mark it as answered if you're willing to post an answer. – AngularChef Mar 04 '17 at 16:54
  • That happens to all of us, sometimes. – JB Nizet Mar 04 '17 at 16:58

2 Answers2

2

You can just use the debounceTime() operator.

You can also chain it with distinctUntilChanged(), to avoid recomputing the HTML if the user, for example, adds two characters and deletes them

JB Nizet
  • 678,734
  • 91
  • 1,224
  • 1,255
1

I would recommend auditTime for your use case in terms of UX.

If the user is typing continuously , then using debounceTime , the Quasi Preview wouldn't generate until there is a pause.

However, in auditTime, the Quasi Preview is generated for every time interval as long as there is a type event.

I believe auditTime gives a better UX.

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.

Some references which I found useful.

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

Difference between audit and debounce in rxjs?

Faiz Mohamed Haneef
  • 3,418
  • 4
  • 31
  • 41