javascript - 你能解决 if 语句中的 promise 吗？

Question

我对在 JS 中使用 Promise 还很陌生，我试图在另一个函数中执行更多代码之前先执行一个函数。唯一的问题是 promise 的函数使用 if 语句来循环 setTimeout 命令。我添加了一个 if 语句，以确保在解决 promise 之前该函数已完成循环，但解决方案没有执行任何操作。我使用 console.log 来确保 if 语句正在执行，并且在解析的两侧打印到控制台时没有问题。任何帮助将不胜感激。

代码:

async makeToast(loader, toaster){
    toaster.texture = loader.resources['toaster_down'].texture;
    this.interactive = false;
    this.x = toaster.x;
    this.y = toaster.y - 100;

    let transform = {y: this.y};
    let popDown = new TWEEN.Tween(transform)
        .to({y: toaster.y - 50}, 200)
        .onUpdate(() => this.y = transform.y); 
    popDown.start();

    await this.changeTexture(loader, toaster.setting)
    console.log('toasting done');
    this.interactive = true;
}

changeTexture(loader, setting){
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            this.state++;
            this.texture = loader.resources[`bread${this.state}`].texture;
            if(this.state < setting) this.changeTexture(loader, setting);
            else if(this.state == setting) resolve();
        }, 1000);
    });
}

Answer 1

第一个之后setTimeout回调执行时，您将永远无法解决最外层调用返回的 promise 。您最终将解决最内层调用返回的 promise ，但这不会执行任何操作，因为从那里返回的 promise 从未被使用过。

您可以写if (this.state < setting) resolve(this.changeTexture(loader, setting))但我建议采用一种不同的、更不那么困惑(且非递归)的方式:

// This could be defined globally, can be useful elsewhere too
const delay = ms => new Promise(resolve => setTimeout(resolve, ms))

// This is in your object
async changeTexture (loader, setting) {
    while (this.state < setting) {
      await delay(1000)
      this.state++
      this.texture = loader.resources[`bread${this.state}`].texture
    }
}

在这里我制作了changeTexture功能async同样，我们可以使用 await内部，因此以更直接的方式实现延迟，并且可以构建常规 while围绕整个事情循环。

(注意:从技术上讲，您现有的代码无条件地执行第一次迭代，因此 do ... while 会更准确，但我假设这只是您尝试使用 setTimeout 构建它的方式的结果，而不是真正的结果你需要什么。)