javascript - Rx DebounceTime 不起作用

Question

遵循 rxjs 和不同指南页面的文档，并不能解决我的 debounceTime 不起作用的问题。

function getValue() {
  return new rxjs.Observable(sub => {
    let counter = 0;
    setInterval(() => {
      counter++;
      sub.next(counter);
    }, 100);
  });
}


// Removing debounceTime works or set it to a value < 100.
getValue().pipe(rxjs.operators.debounceTime(1000)).subscribe(data => {
  console.log(data);
});

https://jsfiddle.net/5bp1cwho/7/

我预计该值每秒出现一次，而不是 100 毫秒。

Answer 1

去抖时间

signature: debounceTime(dueTime: number, scheduler: Scheduler): Observable

Discard emitted values that take less than the specified time between output

您发出的所有项目的间隔都小于 1000 毫秒，因此它们将被丢弃。

注意:默认情况下，第一项不会直接发出。

如果您只想获取最后一个操作，auditTime 就是您要搜索的运算符。

审核时间

Ignores source values for duration milliseconds, then emits the most recent value from the source Observable, then repeats this process.

function getValue() {
  return rxjs.interval(100);
}


// keep the last element after 1000ms 
getValue().pipe(rxjs.operators.auditTime(1000)).subscribe(data => {
  console.log(data);
});

如果想对1000ms内接收到的所有元素进行特定的处理，可以使用bufferTime。

缓冲时间

signature: bufferTime(bufferTimeSpan: number, bufferCreationInterval: number, scheduler: Scheduler): Observable Collect emitted values until provided time has passed, emit as array.

function getValue() {
  return rxjs.interval(100);
}

getValue().pipe(
  rxjs.operators.bufferTime(1000), 
  rxjs.operators.map(itemsList => Math.max(itemsList))
)
.subscribe(data => {
  console.log(data);
});