时间戳

首页 > 解决方案 > rxjs asapscheduler 的执行顺序

rxjs - rxjs asapscheduler 的执行顺序

问题描述

考虑到我有以下代码：

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>

我使用 asapScheduler 运算符。

根据文档，

asap 将等待当前同步执行的代码结束，然后它会尝试尽快执行给定的任务。

上述代码的执行顺序是什么？它们是如何工作的？我没想到最后会打印tap3

下面是输出，

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

标签： rxjsrxjs6rxjs-observablesrxjs-pipeable-operatorsrxjs-marbles

解决方案

据我所知，RxJS 倾向于使用独立的调度程序。它按预期工作：

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);
    }))
})

另一个含义，如果你scheduler在你的 observable 中使用，比如Of(..., asapScheduler)， - 它需要你的 observable 的完整路径流，从创建到订阅结束，并尝试尽快调用它。在您的微任务示例中，它看起来很合理。

推荐阅读