Order of execution with rxjs asapscheduler

Question

Considering I have the following code:

let Rx = window['rxjs'];
const { of,
    queueScheduler,
    asapScheduler,
    asyncScheduler,
    animationFrameScheduler
} = Rx;
const { observeOn, tap } = Rx.operators;
console.clear();


let source$ = of(1, 2, 3, asapScheduler).pipe(
    tap((v) => {
        console.log('tap ', v);
    }),
)

source$.subscribe((v) => {
    console.log('Value ', v);
    Promise.resolve().then(() => {
        console.log('Microtask value ', v);
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.2.1/rxjs.umd.js"></script>

Which I use asapScheduler operator.

As per the documentation,

asap will wait for the current synchronously executing code to end and then it will try to execute the given task as fast as possible.

What's the execution order of the above code? How do they work? I would not have expected that the tap3 to print at the last

Below are the output,

tap  1
Value  1  
tap  2    // here why did this not print Microtask value 1 and Microtask value 2 after printing tap1 and value1?
Value  2
Microtask value  1
Microtask value  2
tap  3
Value  3
Microtask value  3

Anton Marinenko · Answer 1 · 2021-04-18T09:23:18.780

1

As I know RxJS tends to standalone schedulers usage. And it works as expected:

let source$ = of(1, 2, 3).pipe(
    tap((v) => {
        console.log('tap ', v);
    }),
)

source$.subscribe((v) => {
    asapScheduler.schedule(() => console.log('Value ', v));
    asyncScheduler.schedule(() => Promise.resolve().then(() => {
        console.log('Microtask value ', v);
    }))
})

Another meaning, if you use scheduler inside your observable, like Of(..., asapScheduler), - it takes full path flow of your observable, from creation up to end of subscription, and trying to invoke it asap. In your example with microtasks, and it's look reasonable.

edited Apr 18 '21 at 09:23

answered Apr 18 '21 at 09:09

Anton Marinenko

2,749
1
10
16

Can you explain the flow of execution? – anonymous Apr 18 '21 at 17:45
I have updated the question. Is each emission works like a promise( asap inside of)? – anonymous Apr 18 '21 at 18:22
Because you use scheduler in the flow, it tries complete microtasks asap, even if not all macrotask is completed. – Anton Marinenko Apr 18 '21 at 18:51
Seriously don’t understand. Could be nice if you can explain the flow in your answer? – anonymous Apr 18 '21 at 19:24
If it tries to complete asap, why did this not print Microtask value 1 and Microtask value 2 after printing tap1 and value1? – anonymous Apr 18 '21 at 20:07
It works not perfect I guess because of browser event loop. In documentations said it tries execute asap, but not strongly regulated. – Anton Marinenko Apr 18 '21 at 21:17
I found the answer and posted it here – anonymous Apr 19 '21 at 09:27

score 1 · Accepted Answer · answered Apr 19 '21 at 09:25

Steps involved:

of emits the first value according to the scheduler (the next macrotask in this example)
It puts the next value to the scheduler queue (microtask)
Steps 1 and 2 are repeated with each of the next emissions.

The control prints the current macrotask,

1.) tap1 and value1

as per the second step, 2.) tap2 and value2 are executed and complete all the pending asap and async tasks as below,

3.)Microtask value 1 and Microtask value 2

as per the third step,

it again follows the first step as below,

4.) tap 3 and value 3

and as per the second step, tap4 and value4 are executed and completes all the pending asap and async tasks as below,

Microtask value 3 Microtask value 4

To dive deep refer this article

Order of execution with rxjs asapscheduler

2 Answers2

Linked