debounceTime不限制API调用

问题描述 投票:0回答:1

我有这样的代码:

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

然而,在网络选项卡中我仍然看到,所有的请求都被发送。此代码是在我要限制发送的呼叫自动完成组件使用。我使用rxjs 5.5,反应,打字稿。

reactjs typescript rxjs5
1个回答
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)。

© www.soinside.com 2019 - 2024. All rights reserved.