Question

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

我正在将Ionic 3与TypeScript一起使用。

最好的方法是什么？

Answer 1

我只是获取对按钮的引用，订阅单击事件流，并使用flatMap将click事件传递给执行此任务的任何异步函数。 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)
  }))
}

具有可观察对象的任务队列

1 个答案: