我需要幫助讓JS事件回圈等待函式執行

我正在做一個使用fabric.js的專案

• 我從資料庫中獲取影像地址。
• 替換畫布上的占位符影像。
• 然后將畫布保存為帶有 ajax 的 PNG。

當我在不同的點運行此代碼和控制臺日志索引時，我看到主回圈運行并在影像替換部分日志索引之后運行，甚至后來的 ajax 完成。

偽代碼

    for loop
    {
        console.log("start");

        // To go through the image addresses array retrieved from database

        for loop
        {
            console.log("Inside Second loop");

            // To Go through placeholder images or layer of images 
            // There can be multiple images on canvas to replace
            
            // replace Image happens here

            console.log("BeforeImageChange");
            imgToChange.setSrc(imgAddressFromDB){
                console.log("AfterImageChange");
            }
        }
        
        function saveCanvas(){
            //function to save canvas as a Image done through ajax to php
            console.log("AfterSaving");
        }

        saveCanvas();
        console.log("End");
    }

console.log 輸出就像

    "start"
    "Inside Second loop"
    "BeforeImageChange"
    "End"
    "AfterImageChange"
    "AfterSaving"

我怎樣才能使它在 AfterImageChange 之后發生 AfterImageChange 并且在回圈結束之前進行保存？

我是 javascript 新手，我嘗試學習異步方法，但如果它們對我有用的話，它們對我來說沒有意義。如果您需要更多資訊，請在下面評論。謝謝

uj5u.com熱心網友回復：

您需要重新安排您的代碼。您已經知道答案，因為您知道代碼的行為方式，但也許您不熟悉這些技術。首先你需要這樣做：

for loop
{
    console.log("start");

    // To go through the image address retrieved from database

    for loop
    {
        console.log("Inside Second loop");

        // To Go through placeholder images or layer of images
        // replace Image happens here

        console.log("BeforeImageChange");
        imgToChange.setSrc(imgAddressFromDB){
            console.log("AfterImageChange");

            // You already know that code inside here
            // gets executed last
    
            function saveCanvas(){
                //function to save canvas as a Image done through ajax to php
                console.log("AfterSaving");
            }

            saveCanvas();
            console.log("End");
        }
    }
}

但是我認為您不想saveCanvas()在回圈的每次迭代中都這樣做。因此，您只需要在最后一個完成時執行它setSrc()：

for loop
{
    console.log("start");

    // To go through the image address retrieved from database

    let setSrcCount = figureOutHowManyTimesTheForLoopBelowLoops();

    for loop
    {
        console.log("Inside Second loop");

        console.log("BeforeImageChange");
        imgToChange.setSrc(imgAddressFromDB){
            console.log("AfterImageChange");

            setSrcCount --;

            if (setSrcCount === 0) {
                function saveCanvas(){
                    //function to save canvas as a Image done through ajax to php
                    console.log("AfterSaving");
                }

                saveCanvas();
                console.log("End");
            }
        }
    }
}

如果你使用Promises可以使代碼更具可讀性：

function setSrc(imgAddress) {
    return new Promise((ok,err) => {
        imgToChange.setSrc(imgAddress,function () {
            ok();
        });
    });
}

async functionContainingLoops() {

  for loop
  {
    console.log("start");

    // To go through the image address retrieved from database

    for loop
    {
        console.log("Inside Second loop");

        // To Go through placeholder images or layer of images
        // replace Image happens here

        console.log("BeforeImageChange");

        await setSrc(imgAddressFromDB);

        console.log("AfterImageChange");
    }

    function saveCanvas(){
        //function to save canvas as a Image done through ajax to php
        console.log("AfterSaving");
    }

    saveCanvas();
    console.log("End");
  }
}

uj5u.com熱心網友回復：

嘗試在setSrc方法中呼叫saveCanvas()，這樣在呼叫 AfterSaving 控制臺后會呼叫 saveCanvas。

標籤：javascript

上一篇：如何從javascript中的物件陣列中獲取值

下一篇：如何在javaScript中對給定的數字和它的反向數字求和