带有可观察对象的任务队列[关闭]

Question

我有这种情况：我的应用程序的用户可以点击一个按钮来执行一项任务，而该任务需要 2 秒才能完成。我想创建一个队列来按顺序连续执行每个任务。

我正在使用带有 TypeScript 的 Ionic 3。

最好的方法是什么？

Answer 1

我只是获取按钮的引用，订阅点击事件流，然后使用flatMap 将点击事件传递给执行任务的任何异步函数。 RxJS 将确保一切都按顺序执行，而 Rx 的美妙之处在于您不必管理任何状态。

例子：

ionViewDidLoad() {
  // grab a reference to your button.  Doesn't matter how you do it.
  const button = document.getElementById('queueEventButton')

  // Create the stream of clicks
  Observable.fromEvent(button, 'click')
    .flatMap(this.doTask) // pass each click event off to the async process
    .scan( (count: number) => count + 1, 0) // this just counts the mouse click, useful for example
    .subscribe(count => console.log(`Response received for button click #${count}!`))
}

// example task that simulates two second processing
doTask(event: Event): Observable<Event> {
  return Observable.fromPromise(new Promise(resolve => {
    setTimeout(() => resolve(event), 2000)
  }))
}