Javascript 在Angular 5中，当用户停止单击时，如何将单击事件的数量分组并发出一次

我有一个角度应用程序（Angular5+ngrx5）

在我的应用程序中，用户可以单击/选择多个选项/项目（只是简单的div）。例如选项1、选项2、选项3。。。。可以选择多个选项

当前，用户选择一个选项，我们触发服务调用以保存所选选项。我们进行货币版本号检查，因此用户必须等待服务呼叫响应（使用最新版本号）返回，然后才能选择下一个选项。它不能提供良好的用户体验

因此，我希望用户可以继续单击多个选项，一旦用户停止单击，我们将进行一次具有多个选择的服务呼叫

我的问题是，如何对点击事件的数量进行分组，并仅在用户停止点击时发出一次？有什么例子或建议吗

我知道rxjs debounce可以删除发出的值。单击，但我不想删除它们，我想将它们聚合起来，以便进行单个服务调用

---

谢谢

您可以通过设置超时来处理此问题

每次单击时，都可以使用值构建一个数组

然后，设置一个计时器以发送到API。如果它在等待计时器时收到另一个请求，请取消它，然后启动一个新的请求

handleClick(value) {
    this.values.push(value);

    // If there's a timer going, cancel it
    if (this.timer != null) {
      clearTimeout(this.timer);
    }

    // Start a new one
    this.timer = setTimeout(() => {
        // Send to your API
        // Make sure to clear your this.values array after the API call has returned
    }, 5000);
}

---

在上面的示例中，它只会在5秒钟后发送请求，而不会出现单击事件，这是rxjs实现此目的的方法

const ajax=Rx.Observable.timer(4000).mapTo('ajaxcall')
Rx.Observable
 .fromEvent(click, 'click')
 .scan((acc,curr)=> ([curr,...acc]) ,[])
 .debounceTime(500)
 .mergeMap(arrClick=>{
console.log(arrClick) 
return ajax 
 }).subscribe()