resolve() 执行但承诺未按预期解决

Question

我有这样的代码：（我把整个代码放在这里是为了不漏掉任何东西）

let updateCoverLoaded;

function coverLoaded(cover){
  clearInterval(updateCoverLoaded);  
  updateCoverLoaded = setInterval(() => coverLoaded(cover), 25);
  const coverSelector = $(`[aria-label="${cover}"]`).find("image")[0];
  return new Promise(resolve => { 
    if(typeof coverSelector !== "undefined"){
       const coverSelectorSource = coverSelector.getAttribute("xlink:href");
       if(getCoverWidth(coverSelectorSource) !== 0) {
          clearInterval(updateCoverLoaded);
          setTimeout(() => { 
              player.SetVar(`${cover}`, true);
              setTimeout(() => player.SetVar(`${cover}`, false), 100);
              resolve();
          }, 100); 
       }
    }
  });
  
  function getCoverWidth(src) {
    const image = new Image();
    image.src = src;
    return image.naturalWidth;
  }
}

// Add SFX to cover entrance and exit
async function feedbackCover(){
  await coverLoaded('coverB');
  console.log('after resoving promise as expected!');
}

尽管代码到达了 player.SetVar(${cover}, true); 代码行并且我确信 resolve() 已执行，但承诺没有解决，我不能看到 console.log('after resoving promise as expected!'); 为什么？它适用于其他一些情况！

注意：代码实际上是在等待元素（图像）加载，然后解析承诺。

Answer 1

有两个可能的问题，第一个是如果图像还没有加载它第一个 Promise 没有解决并且所有后续的 Promise 都被丢弃，第二个是如果 coverLoaded 被调用同样，第一个承诺永远不会解决。

这应该按预期工作：

function coverLoaded(cover) {
  return new Promise((resolve) => {
    const updateCoverLoaded = setInterval(() => {
        const coverSelector = $(`[aria-label="${cover}"]`).find("image")[0];
        if (typeof coverSelector !== "undefined") {
          const coverSelectorSource = coverSelector.getAttribute("xlink:href");
          if (getCoverWidth(coverSelectorSource) !== 0) {
            clearInterval(updateCoverLoaded);
            setTimeout(() => {
              player.SetVar(`${cover}`, true);
              setTimeout(() => player.SetVar(`${cover}`, false), 100);
              resolve();
            }, 100);
          }
        }
    }, 25);
  });

  function getCoverWidth(src) {
    const image = new Image();
    image.src = src;
    return image.naturalWidth;
  }
}

// Add SFX to cover entrance and exit
async function feedbackCover() {
  await coverLoaded("coverB");
  console.log("after resoving promise as expected!");
}

resolve() 执行但承诺未按预期解决

resolve() executes but promise not resolves as expected

javascript

es6-promise