Angular 2+ 在数组中的单个对象上异步执行 setTimeOut答案

【问题标题】：Angular 2+ async execution of setTimeOut on a single object within arrayAngular 2+ 在数组中的单个对象上异步执行 setTimeOut
【发布时间】：2018-08-23 08:23:08
【问题描述】：

我是角度和学习的新手 :) 如果可能的话，我只需要询问函数的异步执行。下面的代码是同步运行的，但是有没有办法独立执行每个对象或者说是异步的。

一个对象到达数组，从那一刻开始，它的超时被触发并持续，只要设置了持续时间，对于每个对象都是独立的。

代码：

const objArr = [
  { key: 1, item: 'Orange apples', durationInMs: 4000 },
  { key: 2, item: 'Green apples', durationInMs: 2000 },
  { key: 3, item: 'Pink apples', durationInMs: 8000 },
];

// Remove from array after its duration ends
objArr.forEach(item => {
  setTimeout(() => {
    objArr.filter(element => element.key !== item.key);
    // or some other function to remove element from array
  }, item.durationInMs);
});

【问题讨论】：

你想要达到什么目的？就目前而言，您的 for 循环将对每个 setTimeouts 进行排队，因此它应该在 2 秒后触发 Green apples，然后在 2 秒后触发 Orange apples，然后再在 4 秒后触发 Pink apples
它的意思是在持续时间结束时从数组中删除一个对象，它为我所做的是在最长持续时间后删除所有项目
它应该一次删除一个，查看你的代码演示：stackblitz.com/edit/… 请记住，我必须将objArr.filter(... 更改为objArr = objArr.filter(...，因为过滤器函数返回过滤后的数组而不是修改原来的。如果您仍然遇到问题，您能否创建一个 Stackblitz 来重现该问题？
有效，感谢您指出这一点！ ...回到为我学习基础知识:)

标签： angular asynchronous settimeout

【解决方案1】：

您一次应该只有一个计时器。首先按时间对数组进行排序，然后从RxJs（它是异步的）中对最小的一组计时器进行排序。从constructor 或ngOnInit 拨打applyTimer

从“rxjs”导入{Observable}；

const objArr = [
  { key: 1, item: 'Orange apples', durationInMs: 4000 },
  { key: 2, item: 'Green apples', durationInMs: 2000 },
  { key: 3, item: 'Pink apples', durationInMs: 8000 },
];

sortArray() {
    objArr.sort(function (a, b) {
      return a.durationInMs - b.durationInMs;
    }); 
}

applyTimer() {
    this.sortArray();
    if(this.objArr.length > 0) {
        Observable.timer(this.objArr[0].durationInMs).subscribe(x => {
            this.objArr = this.objArr.filter(element => element.key !== this.objArr[0].key);
            this.applyTimer();
        });
    }
}

【讨论】：