在 JavaScript For 迴圈中使用非同步進程時如何避免意外結果？-js教程-PHP中文網

在 JavaScript For 迴圈中使用非同步進程時如何避免意外結果？

Linda Hamilton

發布： 2024-12-18 16:24:10

原創

742 人瀏覽過

How Can I Avoid Unexpected Results When Using Asynchronous Processes in JavaScript For Loops?

JavaScript For 迴圈中的非同步進程

在 JavaScript 中，for 迴圈可以非同步執行，從而在使用回調時導致意外結果。考慮以下範例：

var i;
var j = 10;
for (i = 0; i < j; i++) {
    asynchronousProcess(callbackFunction() {
        alert(i);
    });
}

登入後複製

此程式碼旨在顯示數字從 0 到 10 的警報。但是，由於循環的非同步性質，回呼函數可能會在發生多次循環迭代後觸發，導致顯示更高的 i 值。

解決方案

解決此問題對於這個問題，在每個回調的閉包中捕獲循環的索引至關重要。這可以透過多種方式實現：

使用 .forEach()`: forEach() 為每次迭代建立自己的函數閉包。

someArray.forEach(function(item, i) {
    asynchronousProcess(function(item) {
        console.log(i);
    });
});

登入後複製

使用建立函數閉包IIFE:

var j = 10;
for (var i = 0; i < j; i++) {
    (function(cntr) {
        // Capture the value of `i` into `cntr`
        asynchronousProcess(function() {
            console.log(cntr);
        });
    })(i);
}

登入後複製

修改非同步函數： 將變數傳遞給非同步函數並讓它傳回給回呼。

var j = 10;
for (var i = 0; i < j; i++) {
    asynchronousProcess(i, function(cntr) {
        console.log(cntr);
    });
}

登入後複製

使用 ES6 let`: 如果可用，請使用 let 宣告循環變數。

const j = 10;
for (let i = 0; i < j; i++) {
    asynchronousProcess(function() {
        console.log(i);
    });
}

登入後複製

使用 Promises 和 async/await 進行序列化`:這種方法確保順序現代非同步操作的執行

async function someFunction() {
    const j = 10;
    for (let i = 0; i < j; i++) {
        // Wait for previous promise to resolve before proceeding
        await asynchronousProcess();
        console.log(i);
    }
}

登入後複製

並行運作操作並收集結果：使用 Promise.all() 依序收集結果。

function someFunction() {
    let promises = [];
    for (let i = 0; i < 10; i++) {
        promises.push(asynchronousProcessThatReturnsPromise());
    }
    return Promise.all(promises);
}

someFunction().then(results => {
    // Array of results in order
    console.log(results);
}).catch(err => {
    console.log(err);
});

登入後複製

以上是在 JavaScript For 迴圈中使用非同步進程時如何避免意外結果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！