javascript - 深入研究 Rx.ReplaySubject : How to delay `next()` ?

Question

Ignoring Block: Either I'm wrong here, or the whiskey is starting to work. (I don't want to rule out that I'm going stupid either. Sorry for that.)

期望:

我希望 ReplaySubject 每 2 秒返回一个值，因为我在调用 next() 之前等待两秒(每次)。

结果:

结果是等待了 2 秒，但随后所有值都同时输出。

有问题的代码在这里:

import { ReplaySubject } from 'rxjs';

export const rs$: ReplaySubject<number> = new ReplaySubject();

rs$.subscribe({
  next: (data) => console.log(data),
  error: (error) => console.warn(error),
  complete: () => console.log('ReplaySubject completed'),
});

const fakeAPIValuesOne: Array<number> = [7, 11, 13];

fakeAPIValuesOne.forEach(async (entry: number) => {
  await wait(2000);  // <--- Why does wait() not work?
  rs$.next(entry);
});

function wait(milliseconds: number) {
  return new Promise((resolve) => setTimeout(resolve, milliseconds));
}

问题:

我在这里做错了什么？

如果您想尝试一下:https://stackblitz.com/edit/rxjs-wpnqvq?file=index.ts

编辑 1:

SetTimeout 也没有效果。下面的代码和上面的完全一样:

fakeAPIValuesOne.forEach((value: number) => {
  setTimeout(() => {
    rs$.next(value);
  }, 2000);
});

我想知道 next() 如何覆盖这里的所有延迟？

编辑 2

问题已解决，标明正确答案，谢谢!您需要以下详细信息来运行根级别等待您的 ts 文件。

package.json

请注意类型部分:

{
  "name": "playground",
  "version": "1.0.0",
  "description": "",
  "main": "index.ts",
  "scripts": {
    "start": "nodemon index.ts",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "rxjs": "^7.5.5",
    "ts-node": "^10.7.0",
    "typescript": "^4.8.0-dev.20220507"
  },
  "type": "module"
}

nodemon.json

请考虑以下配置以避免错误:TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts"

{
  "execMap": {
    "ts": "node --loader ts-node/esm"
  }
}

最后但并非最不重要的tsconfig.json

{
  "compilerOptions": {
    "module": "ESNext",
    "target": "ESNext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "isolatedModules": true,
    "noEmit": true,
    "strict": true,
    "lib": ["esnext", "DOM"]
  }
}

Answer 1

以下注释摘自 mozilla 网络文档 here

Note: forEach expects a synchronous function.

forEach does not wait for promises. Make sure you are aware of theimplications while using promises (or async functions) as forEachcallback.

所以你这个问题与 ReplaySubject 无关，你不能对这个用例使用 forEach。

干杯

编辑:已解决

import { ReplaySubject } from "rxjs";

export const rs$ = new ReplaySubject();

rs$.subscribe({
  next: (data) => console.log(data),
  error: (error) => console.warn(error),
  complete: () => console.log("ReplaySubject completed"),
});

const fakeAPIValuesOne = [7, 11, 13];

// That won't work:
// fakeAPIValuesOne.forEach(async (entry: number) => {
//   await wait(2000);
//   rs$.next(entry);
// });


// That will work
for (const element of fakeAPIValuesOne) {
  await wait(2000);
  rs$.next(element);
}

function wait(milliseconds: number) {
  return new Promise((resolve) => setTimeout(resolve, milliseconds));
}