Wie kann ich unerwartete Ergebnisse vermeiden, wenn ich asynchrone Prozesse in JavaScript-For-Schleifen verwende?

Asynchrone Prozesse in JavaScript-For-Schleifen

In JavaScript können For-Schleifen asynchron ausgeführt werden, was bei der Arbeit mit Rückrufen zu unerwarteten Ergebnissen führt. Betrachten Sie das folgende Beispiel:

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

Dieser Code soll Warnungen mit Zahlen von 0 bis 10 anzeigen. Aufgrund der asynchronen Natur der Schleife kann die Rückruffunktion jedoch ausgelöst werden, nachdem mehrere Schleifeniterationen stattgefunden haben. Dies führt dazu, dass höhere Werte für i angezeigt werden.

Lösungen

Um dieses Problem zu beheben, verwenden Sie es Es ist von entscheidender Bedeutung, den Index der Schleife in einem Abschluss für jeden Rückruf zu erfassen. Dies kann auf verschiedene Arten erreicht werden:

• Verwenden Sie .forEach()`: forEach() erstellt für jede Iteration einen eigenen Funktionsabschluss.

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

• Erstellen Sie einen Funktionsabschluss mit einem 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);
}

• Ändern Sie die asynchrone Funktion: Übergeben Sie die Variable an die asynchrone Funktion und lassen Sie sie an den Rückruf zurückgeben.

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

• Verwenden Sie ES6 let`: Wenn verfügbar, deklarieren Sie die Schleifenvariable mit let.

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

• Serialisieren mit Promises und async/await`: Dieser Ansatz gewährleistet die sequentielle Ausführung asynchroner Vorgänge in a moderne Umgebung.

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

• Vorgänge parallel ausführen und sammeln Ergebnisse: Verwenden Sie Promise.all(), um die Ergebnisse der Reihe nach zu sammeln.

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

Das obige ist der detaillierte Inhalt vonWie kann ich unerwartete Ergebnisse vermeiden, wenn ich asynchrone Prozesse in JavaScript-For-Schleifen verwende?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!