Bagaimanakah Saya Boleh Mengelakkan Keputusan Yang Tidak Dijangka Apabila Menggunakan Proses Asynchronous dalam JavaScript Untuk Gelung?

Proses Asynchronous dalam JavaScript For Loops

Dalam JavaScript, for loops boleh dilaksanakan secara tidak segerak, membawa kepada hasil yang tidak dijangka apabila bekerja dengan panggilan balik. Pertimbangkan contoh berikut:

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

Kod ini bertujuan untuk memaparkan makluman dengan nombor dari 0 hingga 10. Walau bagaimanapun, disebabkan sifat tak segerak bagi gelung, fungsi panggil balik mungkin mencetuskan selepas berbilang lelaran gelung berlaku, menghasilkan nilai i being yang lebih tinggi dipaparkan.

Penyelesaian

Untuk menyelesaikan isu ini, adalah penting untuk menangkap indeks gelung dalam penutupan bagi setiap panggilan balik. Ini boleh dicapai dalam beberapa cara:

• Gunakan .forEach()`: forEach() mencipta penutupan fungsinya sendiri untuk setiap lelaran.

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

• Buat Penutupan Fungsi menggunakan 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);
}

• Ubah suai Fungsi Asynchronous: Lulus pembolehubah kepada fungsi tak segerak dan minta ia mengembalikannya ke panggilan balik.

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

• Gunakan ES6 let`: Apabila tersedia, isytiharkan pembolehubah gelung menggunakan let.

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

• Serialize with Promises and async/wait`: Pendekatan ini memastikan urutan pelaksanaan operasi tak segerak dalam moden persekitaran.

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);
    }
}

• Jalankan Operasi Secara Selari dan Kumpul Hasil: Gunakan Promise.all() untuk mengumpul keputusan mengikut urutan.

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);
});

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengelakkan Keputusan Yang Tidak Dijangka Apabila Menggunakan Proses Asynchronous dalam JavaScript Untuk Gelung?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!