Rxjs：如何配置bufferTime仅在有新值到达时触发发射？

你当前使用bufferTime(100)处理窗口resize事件时，即使没有新的resize事件触发，bufferTime仍会每隔100ms发射一个空数组。你需要实现的效果是：仅当有新值进入时，才在100ms后一次性发射这段时间内收集的所有值；无新值时不向订阅者推送数据。

解决方案 #

方案一：适配连续触发场景（推荐用于resize） #

使用buffer结合debounceTime，会在最后一次值触发后的100ms，一次性发射这段时间内收集的所有值，完全匹配你的需求：

this.resizeSubject.pipe(
  // 以debounceTime的触发作为buffer的结束信号：最后一次值后等待100ms，无新值则发射缓冲数据
  buffer(this.resizeSubject.pipe(debounceTime(100)))
).subscribe((data) => {
  console.log(data);
});

方案二：定时批量检查 #

如果需要严格按照“每100ms检查一次，有值则发射该时间段内的所有值，无值则跳过”，可以用bufferTime配合filter过滤空数组：

this.resizeSubject.pipe(
  bufferTime(100),
  // 过滤空数组，仅发射包含有效数据的缓冲结果
  filter(buffer => buffer.length > 0)
).subscribe((data) => {
  console.log(data);
});

原始事件触发代码 #

你的resize事件处理逻辑：

@HostListener('window:resize', ['$event'])
onResize(event) {
  let innerWidth = event.target.innerWidth;
  this.resizeSubject.next(innerWidth);
}

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