{"id":1303,"date":"2023-08-11T05:00:00","date_gmt":"2023-08-11T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1303"},"modified":"2023-08-10T19:40:01","modified_gmt":"2023-08-11T02:40:01","slug":"rxjs-timer-for-recurring-tasks","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/rxjs-timer-for-recurring-tasks\/","title":{"rendered":"RxJs Timer for recurring tasks"},"content":{"rendered":"\n

You’re probably familiar with setTimeout<\/a><\/code> (to run some code after a given timeout) and setInterval<\/a><\/code> (to run some code at a given time interval). Both are “native” Javascript functions and can be used with Angular.<\/p>\n\n\n\n

That said, recurring code execution is asynchronous, and asynchronous work is often done with RxJs in Angular apps. As a result, let’s talk about a 100% RxJs way to replace setTimeout<\/code> and setInterval<\/code>.<\/p>\n\n\n\n

The RxJS timer<\/code><\/a> operator creates an observable that emits a value after a specified delay. The delay can be specified in milliseconds or as a Date<\/code> object.<\/p>\n\n\n\n

The following code creates an observable that emits a value (0) after one second:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

If we want timer<\/code> to emit immediately and then keep emitting at a given interval, we can do the following:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

This would emit 0 immediately, then 1 five seconds later, 2 ten seconds later, etc. Most of the time, we don’t care about the emitted number. We want to turn that Observable into another one (like an HTTP request, for instance) using our good friend switchMap<\/a><\/code>:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

What’s the benefit of using timer<\/code> in such scenarios? We get automatic unsubscriptions if we use the async<\/code> pipe<\/a> or the takeUntilDestroyed<\/code> operator<\/a>.<\/p>\n\n\n\n

Here is a tutorial for a concrete example of how to do HTTP polling with Angular<\/a> and the timer<\/code> operator.<\/p>\n","protected":false},"excerpt":{"rendered":"

You’re probably familiar with setTimeout (to run some code after a given timeout) and setInterval (to run some code at a given time interval). Both are “native” Javascript functions and can be used with Angular. That said, recurring code execution is asynchronous, and asynchronous work is often done with RxJs in Angular apps. As a […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,10],"tags":[],"class_list":["post-1303","post","type-post","status-publish","format-standard","hentry","category-operators","category-rxjs"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1303","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=1303"}],"version-history":[{"count":2,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1303\/revisions"}],"predecessor-version":[{"id":1312,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1303\/revisions\/1312"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1303"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1303"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1303"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}