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?

Improve this question
5
  • reactivex.io/rxjs/class/es6/… Commented Mar 4, 2017 at 16:44
  • JB... Could it be as simple as that? :) Commented Mar 4, 2017 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. Commented Mar 4, 2017 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. Commented Mar 4, 2017 at 16:54
  • That happens to all of us, sometimes. Commented Mar 4, 2017 at 16:58

2 Answers 2

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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?

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.