Question

我有此代码：

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

但是，在“网络”标签中，我仍然看到所有请求都已发送。此代码用于自动完成组件中，在该组件中我想限制发送的呼叫。我正在使用rxjs 5.5，React和Typescript。

Answer 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）。

debounceTime不限制api调用

1 个答案: