Promise 然后解決太快了

Question

我正在嘗試用 js 學習承諾，但我有點卡住了。 我的目標是在顯示加載器的過程中獲取圖像源（使用替換），因為某些圖像尺寸很大。 我的問題是它正確傳遞了變量，但是“promise.then”在創建 src 之前運行。

下面是代碼，我需要 src 值，然后是加載程序隱藏。 我知道有更多方法可以執行此操作，但如前所述，我的目標是理解承諾。 我也嘗試添加一個 setTimeout 但同樣，promise 然后過快地解決了它，添加了一個損壞的圖像標志。

$(".owlsmaller").on("click", function(){

    $(".loader").show();

    const promise = new Promise((resolve, reject) => {
      str = $(this).attr("src").replace(/-800x300/gi, '');
        resolve(str);
    });

    promise
        .then((str) => {
            console.log(str);
            $(".mainThumb").attr("src", str);
            $(".mainThumb").attr("srcset", str);
        })
        .then( () => {
            $(".loader").hide();
        });
  });

Answer 1

TLDR； 您的 promise 正在立即解決(*1) ，因為沒有運行異步代碼。 你的方法應該不同。

多一點解釋

你對 Promise 的工作方式有誤解。 Promise 允許您等待異步代碼的解析，但是將同步代碼放在 Promise 的主體中不會使該代碼異步。

編輯：根據@juan-mendez 的評論，我將澄清：promise 主體內的代碼正常運行（同步），並在調用 promise 構造函數后立即執行。 實際上，由 Promise 構造函數采用的 function 參數被命名為executor ，它會立即執行。最終被延遲的是調用任何then then的任何鏈接調用。

Promise 構造函數旨在讓您運行一些異步 function（如獲取請求），通常為您提供回調以操作該調用的結果。 然后，您可以從回調中調用resolve 。

您正在調用的 jQuery 函數$和attr是同步的，因此不需要 promise 。 實際上，您放置解析調用甚至不關心$或attr是否是異步的，因為它是緊隨其后放置的，而不是在回調或類似的東西中（當然，沒有可用的回調，因為沒有異步性）。

*( 1) 在所有同步代碼完成運行后立即。

Answer 2

您的 promise 需要等待圖像加載。 並且您已經將replace() 的返回值分配給圖像的src？

const promise = new Promise((resolve, reject) => {
  $(this).on("load", resolve)
         .on("error", reject)
         .attr("src", (index, attr) => attr.replace(/-800x300/gi, ''));
});