我有这样的代码:
await commuteReportService.getAddresses(query).pipe(debounceTime(1000))
.subscribe((response: AddressesAPIResponse) => {
console.log('execute call', response);
});
然而,在网络选项卡中我仍然看到,所有的请求都被发送。此代码是在我要限制发送的呼叫自动完成组件使用。我使用rxjs 5.5,反应,打字稿。
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)。