继续延迟 HTTP 请求，直到新参数到达

Question

假设我们有一个 getIds() 函数，它接受一个包含一些 id 的数组 像这样：

getIds([4, 1, 32]);

此函数将 HTTP 调用延迟 100 毫秒。但在 100 毫秒内，如果这 再次调用相同的函数：

getIds([1, 8, 5]);

它将重置 100 毫秒计时器并继续合并传递的 id。它会 仅当超过 100 毫秒未被任何人调用时才发送 HTTP 请求。

我是 RxJS 的新手，这是我解决这个问题的尝试，但我有 感觉这个问题可以有更好的解决方案。

https://jsfiddle.net/iFadey/v3v3L0yd/2/

function getIds(ids) {
  let observable = getIds._observable,
      subject = getIds._subject;

  if (!observable) {
    subject = getIds._subject = new Rx.ReplaySubject();
    observable = getIds._observable = subject
      .distinct()
      .reduce((arr, id) => {
        arr.push(id);
        return arr;
      }, [])
      // Some HTTP GET request will go here
      // whose results may get flatMapped here
      .publish()
      .refCount()
      ;
  }

  ids.forEach((id) => {
    console.log(id);
    subject.next(id);
  });

  clearTimeout(getIds._timer);
  getIds._timer = setTimeout(() => {
    getIds._observable = null;
    getIds._subject = null;
    subject.complete();
  }, 100);

  return observable;
}

getIds([1, 2, 3])
.subscribe((ids) => {
  console.log(ids);
});

getIds([3, 4, 5])
.subscribe((ids) => {
  console.log(ids);
});

编辑： 我正在寻找一个行为类似于 debounce 但不丢弃先前值的运算符。相反，它必须将它们排队。

Answer 1

我不确定您正在寻找以下哪一项，因此我将简单地描述两者。根据我的经验，有两种“基于时间的模式”最适合解决这类问题：

• 去抖动

rxmarbles 网址：http://rxmarbles.com/#debounce； github doc

正如它在文档中所说，它

在特定时间跨度后从源 Observable 发射一个项目 在 Observable 没有省略任何其他项目的情况下通过了。

• 油门

rxmarbles 网址：还没有； github doc

返回一个 Observable，它只发出由 source 在指定的连续时间窗口内可观察到 持续时间。

基本上，如果您想等到输入静默一段时间后再采取行动，您需要去抖动。如果您根本不想等待，但又不想在特定时间内进行超过 1 次查询，则需要限制。

希望它有意义。