angular - 如何使用 debounceTime 但在一定时间后仍然触发该功能？

Question

TLDR；我想使用 debounceTime 仅在 300 毫秒没有被调用时才执行该函数。同时，如果这个过程需要很长时间，我也希望能够每 1 分钟触发一次该功能。否则，该函数只会在流程结束时触发。

---

基本上，我们的系统有一个很长的过程，会向客户端触发大量 SignalR 更新。当我在客户端收到服务器命令时，我将向服务器发出 2 个额外的 HTTP 请求以获取一些信息。这样只要服务器向我发送更新，它就会回击服务器。

I am using debounceTime to prevent sending too many requests back to the server If the time between two commands is within 300ms. But there is one use case where the server constantly sending the update to the client in, e.g 1 hour. Meaning the client will trigger the getItemCount at 1h and 300ms.

export class LeftNavigationComponent implements OnInit, OnDestroy {
    typeACount: number = 0;
    typeBCount: number = 0;    

    constructor(
        private itemService: service.ItemService,        
        private signalR: service.SignalRService) { }

    ngOnInit(): void {
        this.subscriptions = [            
            this.signalR.itemCreated.debounceTime(300).subscribe(item => this.onUpdatingData())]
    }

    onUpdatingData() {
        Promise.all([
            this.itemService.getItemCount(APP_SETTING.TYPE_A),
            this.itemService.getItemCount(APP_SETTING.TYPE_B)])
            .then(response => this.gettingCountDone(response))
    }

    gettingCountDone(response) {
        this.typeACount = <any>response[0];
        this.typeBCount = <any>response[1];        
    }
}

我仍然想要debounceTime 来防止向服务器发送过多的请求。但它应该足够聪明，可以在收到第一次更新后每隔 1 分钟自动触发一次。以前有人用过这个用例吗？

Answer 1

Pavel 的答案很接近，但如果我已经很好地理解了这个问题，你想要这个:

ngOnInit(): void {
    const debounced = this.signalR.itemCreated.debounceTime(300).share();
    this.subscriptions = [         
        debounced.subscribe(() => this.onUpdatingData()),
        debounced.switchMap(() => Observable.interval(60000).takeUntil(this.signalR.itemCreated)).subscribe(() => this.onUpdatingData())
    ]
}

此代码将执行以下操作，当创建的项目之间的时间大于 300 毫秒时，将调用 onUpdatingData()。之后，每次 debounced 发出一个值时，都会创建一个 1 分钟的 throttleTime observable。这意味着，如果 debounced 自上次发射后一分钟内没有发射，将执行 onUpdatingData()，依此类推。

改进是合并可观察对象，因为它们来自同一类型并执行相同的函数，例如:

ngOnInit(): void {
    const debounced = this.signalR.itemCreated.debounceTime(300).share();
    const merged = debounced.switchMap(() => Observable.interval(60000).takeUntil(this.signalR.itemCreated))
    this.subscriptions = [         
      merged.subscribe(() => this.onUpdatingData())
   ]
}

我发布了一个显示工作解决方案的 fiddle 。在这个 fiddle 中，事件 mousedown 模拟流 this.signalR.itemCreated。

https://jsfiddle.net/llpujol/e6b6o655/