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

Есть две возможные проблемы: первая заключается в том, что если изображение еще не загружено, первое обещание не разрешается, а все последующие обещания отбрасываются, вторая заключается в том, что если 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!");
}