股票数据轮询场景应使用setInterval还是RxJS interval？

原生JavaScript（setTimeout）实现 #

你的需求完全可以不用RxJS，通过递归调用setTimeout即可实现，避免setInterval的请求堆叠问题，实现逻辑如下：

1. 定义私有变量控制轮询状态

private isPollingRunning = true;
private pollTimeoutId: any;

2. 修改组件初始化和轮询逻辑

ngOnInit() {
  // 首次加载立即触发请求
  this.getUpdatedStock();
}

getUpdatedStock(){
  this.stockService.getStockData().subscribe({
    next: (data) => {
      this.latestStock = data;
      // 原有表格高亮处理逻辑保留
    },
    error: (err) => {
      // 按需添加错误提示、降级处理逻辑
      console.error('股票数据拉取失败', err);
    },
    complete: () => {
      // 请求完成（无论成功失败）后，间隔3秒发起下一次请求
      if (this.isPollingRunning) {
        this.pollTimeoutId = setTimeout(() => {
          this.getUpdatedStock();
        }, 3000);
      }
    }
  })
}

3. 组件销毁时清理定时器，避免内存泄漏

ngOnDestroy() {
  this.isPollingRunning = false;
  clearTimeout(this.pollTimeoutId);
}

RxJS实现方案 #

如果你使用的是Angular框架，本身已经内置RxJS依赖，不会额外增加包体积，无需担心体积问题。用RxJS实现时序控制更简洁，无需手动维护定时器状态：

1. 导入必要操作符，定义销毁通知流

import { timer, Subject, takeUntil, expand, tap } from 'rxjs';

private destroy$ = new Subject<void>();

2. 修改请求方法，返回Observable并嵌入数据处理逻辑

getUpdatedStock() {
  return this.stockService.getStockData().pipe(
    tap(data => {
      this.latestStock = data;
      // 原有表格高亮处理逻辑保留
    })
  );
}

3. 组件初始化时启动轮询

ngOnInit() {
  // 首次立即执行，每次请求完成后间隔3秒发起下一次
  this.getUpdatedStock().pipe(
    expand(() => timer(3000).pipe(() => this.getUpdatedStock())),
    takeUntil(this.destroy$)
  ).subscribe();
}

4. 组件销毁时终止轮询

ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

方案选择建议 #

两种方案都可以完全满足你的需求：

• 如果你不想引入RxJS相关逻辑，直接用递归setTimeout方案即可
• 如果是Angular项目优先选择RxJS方案，代码更易维护，还可以方便扩展失败重试、请求防抖等能力

内容的提问来源于stack exchange，提问作者ani