debounceTime 不限制 api 调用答案

【问题标题】：debounceTime not limiting api callsdebounceTime 不限制 api 调用
【发布时间】：2019-02-04 08:19:37
【问题描述】：

我有这个代码：

await commuteReportService.getAddresses(query).pipe(debounceTime(1000))
            .subscribe((response: AddressesAPIResponse) => {
                console.log('execute call', response);
            });

但是，在网络选项卡中，我仍然看到正在发送所有请求。此代码用于我想限制正在发送的调用的自动完成组件中。我正在使用 rxjs 5.5、React 和 Typescript。

【问题讨论】：

很难看到只有这个函数发生了什么，但是，在你的 debounceTime(1000) -> pipe(debounceTime(1000), distinctUntilChanged()) 之后添加它
debounceTime(1000) 只是延迟api调用，不限制。我假设您的 api 调用在 1000 毫秒后被调用。每次键盘按下输入字段后
也许我需要节流时间，但这也不起作用。我不想在每次按键时都发送请求。
你应该抑制点击，而不是 api 调用。

标签： reactjs typescript rxjs5

【解决方案1】：

debounceTime 仅适用于它之后的任何内容，这意味着它仅适用于您的“订阅”——而不是 getAddresses(query)，我假设您正在拨打电话。

考虑这个最小的例子：

// html
<input type="text" id="example" />

// js
const input = document.getElementById('example');

Rx.Observable
  .fromEvent(input, 'keyup')
  .map(v => {
    console.log('called')
    return v.target.value;
  })
  .debounceTime(500)
  .subscribe(val => {
    console.log(`Debounced: ${val}`);
  });

即使Debounced... 被延迟，您仍然会看到called 在每次击键时都被记录到控制台。如果我们改变顺序

// js
Rx.Observable
  .fromEvent(input, 'keyup')
  .debounceTime(500)
  .map(v => {
    console.log('called')
    return v.target.value;
  })
  .subscribe(val => {
    console.log(`Debounced: ${val}`);
  });

现在Debounced... 和called 都被延迟了 (Here's the fiddle for the code above)。

【讨论】：