javascript - 在 Angular 5 中,如何对点击事件进行分组并仅在用户停止点击时发出一次

标签 javascript angular rxjs ngrx

我有一个 Angular 应用程序 (Angular5 + ngrx5)。

在我的应用程序中,用户可以单击/选择多个选项/项目(只是简单的 div)。例如option1, option2, option3 ....可以选择多个选项。

目前,用户选择一个选项,我们触发一个服务调用来保存一个选择的选项。我们会检查货币版本号,因此用户必须等待服务调用响应(带有最新版本号),然后才能选择下一个选项。它没有提供良好的用户体验。

因此,我更希望用户可以继续点击多个选项,一旦用户停止点击,我们将进行一次具有多项选择的服务调用。

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

我知道 rxjs debounce 可以删除发出的 values.clicks,但我不想删除它们我想聚合它们以便进行单个服务调用。

谢谢

最佳答案

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()

https://jsfiddle.net/7kbg4q2e/453/

关于javascript - 在 Angular 5 中,如何对点击事件进行分组并仅在用户停止点击时发出一次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51870066/

相关文章:

javascript - 如何在javascript中返回一个始终大于前一个数字的随机数

javascript - 无法解决rxjs依赖问题

angular - 确保最后一个 http post 在 Angular 中最后到达后端

javascript - TypeScript:在键上强制命名并在值上键入,这可能吗?

Angular 6 第二嵌套子路线不起作用

jquery - Angular 2 和 jQuery - 如何测试?

Angular 2 - 类型 'skipLast' 上不存在属性 'Observable<number>'

javascript - 在类中使用 getter 和 setter 的无限循环

javascript - 数组的声明

javascript - 创建辅助函数以在隔离范围内运行函数