javascript - Typescript - for 循环中动态变量的 setTimeout 自定义时间

Question

所以我有这个函数，它的超时时间每 3 秒改变一次:

 setActiveImage(promotions) {
    for (let i = 0; i <= promotions.length - 1; i++) {
      setTimeout(()=> {
        this.activeImage = 'http://myrul/public/Commercials/' + promotions[i].commercial_file[0].file;
      }, 3000*(i)); //CHANGE PICTURE EVERY 3s

    }
  }

现在我想将时间 (3000) 更改为我从促销事件中获得的自定义变量。这是促销事件:

因此，每张图片或 i 的实例都有自己的时间。

这是我所做的:

for (let i = 0; i <= promotions.length - 1; i++) {

  var x = promotions[i].time; //GET TIME
  var y = +x; //TURN STRING TO NUMBER
  var z = y * 1000; //TURN SECOND INTO MILISECONDS

  var promoDisplayTime = z; //CUSTOM TIME

  setTimeout(()=> {
    this.activeImage = 'http://myurl/Commercials/' + promotions[i].commercial_file[0].file;
  }, promoDisplayTime*(i));

}

理论上这应该可行，但计时器走得太远了。第一张图片应该持续4秒，但持续了3秒。第二张图片应该持续3秒，但持续了6秒。第三张图片应该是10秒，但持续了4秒......

我不明白我做错了什么。即使我发送了正确的变量promoDisplayTime，为什么计时器还是关闭。

<小时/>

带有虚拟数据的 StackBlitz: https://stackblitz.com/edit/angular-r6ejw9?file=src%2Fapp%2Fapp.component.html

Answer 1

这是使用 async 函数和 setTimeout() 的可能解决方案之一。

使用异步函数，我们确保下一张幻灯片不会在第一张幻灯片之前执行。

使用 setTimeout 时应该注意的是，计时器将在时间到期后执行给定的函数。

所以工作示例应该是这样的:

activeImage: string = 'https://pngimage.net/wp-content/uploads/2018/06/start-png-.png';

  promotions = [
    {
      time: 6,
      pic: 'https://pngimage.net/wp-content/uploads/2018/06/1-an-png-1.png'
    },
    {
      time: 3,
      pic: 'https://upload.wikimedia.org/wikipedia/commons/1/10/MRT_Singapore_Destination_2.png'
    },
    {
      time: 4,
      pic: 'https://upload.wikimedia.org/wikipedia/commons/a/aa/L%C3%ADnea_3_CAMETRO.png'
    }
  ];

  ngOnInit() {
      this.setActiveImage();
  }

  setActiveImage() {
    let _this = this;
    countDown();

    function printer(i) {

      return new Promise(resolve => {
        _this.activeImage = _this.promotions[i].pic;
        setTimeout(function () {
          resolve(true);
        }, _this.promotions[i].time * 1000);
      });
    }

    async function countDown() {
      for (var i = _this.promotions.length -1; i >= 0; i--) {
        await printer(i);
      }
    }

  }

现场演示:https://stackblitz.com/edit/angular-qwtgm2