Lösung des Problems einer außer Kontrolle geratenen JavaScript-Schleife

JavaScript ermöglicht nicht nur eine bequeme Steuerung von Webseiten auf der Clientseite, sondern bringt auch viele Probleme mit sich. Unter anderem ist der Verlust der Kontrolle über Skripte eines der problematischsten Probleme.

Einer der Hauptgründe dafür Der Verlust der Kontrolle über Skripte führt dazu, dass zu viele Operationen in der Schleife ausgeführt werden

Es gibt zwei Gründe dafür, dass die Schleife außer Kontrolle gerät, und der andere ist, dass es zu viele Operationen in der Schleife gibt Es gibt zu viele Schleifen.

Der Trick, dieses Problem zu lösen, besteht darin, jede Schleife mit den folgenden zwei Fragen auszuwerten:

Muss diese Schleife synchron ausgeführt werden?
Müssen die Daten in der Schleife der Reihe nach ausgeführt werden?
Wenn die Antwort auf beide Fragen „Nein“ lautet, können Sie die Operationen in der Schleife zerlegen. Der Schlüssel besteht darin, die Antworten auf die beiden oben genannten Fragen basierend auf dem spezifischen Kontext Ihres Codes zu ermitteln. Eine typische Schleife könnte so aussehen:

for(var i=0; i < items.length; i++){
process(items[i]);
}

Auf den ersten Blick gibt es bei dieser Schleife kein großes Problem. Ob sie lange läuft, hängt ganz von der Anzahl der Schleifen ab. Wenn es keinen anderen Code gibt, der vom Ergebnis der Schleife abhängt, wenn er unmittelbar nach der Schleife ausgeführt wird, lautet die Antwort auf die erste Frage „Nein“. Sie können auch feststellen, dass die Schleife jeweils nur einen Wert verarbeitet und nicht vom Ergebnis der vorherigen Schleife abhängt, sodass die Antwort auf die zweite Frage ebenfalls Nein lautet. Dies bedeutet, dass die Schleife auf eine Weise unterbrochen werden kann, die nicht dazu führt, dass der Browser abstürzt und eine Meldung anzeigt, dass das Skript außer Kontrolle geraten ist.

Im Buch „Professional JavaScript, Second Edition“ empfehle ich für Illusionen mit sehr langen Ausführungszeiten die folgende Methode, um damit umzugehen:

Funktionsblock (Array, Prozess, Kontext) {
setTimeout(function(){
var item = array.shift();
process.call(context, item);

if (array.length > 0 ){
setTimeout(arguments.callee, 100);
}
}, 100);
}

Der Zweck der chunk()-Funktion besteht darin, ein Array in kleine Teile zu unterteilen Zur Verarbeitung (daher der Name) können wir drei Parameter übergeben. Das zu verarbeitende Array-Objekt, die Verarbeitungsfunktion und eine optionale Kontextvariable, mit der das entsprechende Objekt in der Funktion „process()“ festgelegt wird. Der erste Timer wird verwendet, um die Verzögerung zwischen Vorgängen zu verwalten (hier auf 100 Millisekunden eingestellt, Sie können ihn entsprechend den tatsächlichen Anforderungen ändern). Jedes Mal, wenn diese Funktion ausgeführt wird, wird das erste Objekt im Array herausgenommen und zur Ausführung an die Funktion „process()“ übergeben. Wenn zu diesem Zeitpunkt noch unverarbeitete Objekte in „process()“ vorhanden sind, wird ein weiterer Timer gestartet wiederholt. Für die oben erwähnte Schleife können Sie diese Funktion folgendermaßen verwenden:

chunk(items, process);

Es ist zu beachten, dass das Array hier die Form einer Warteschlange annimmt. , und während der Schleife werden jedes Mal Änderungen vorgenommen. Wenn Sie den ursprünglichen Zustand des Arrays ändern möchten, gibt es zwei Möglichkeiten: Eine besteht darin, die Funktion concat() zu verwenden, um eine Kopie des aktuellen Arrays zu erstellen, bevor Sie es übergeben:

chunk(items.concat( ), Prozess );

Eine andere Möglichkeit besteht darin, die Funktion chunk() direkt zu ändern und sie direkt innerhalb der Funktion zu ändern:

Funktion chunk(array, process, context){
var items = array .concat(); //das Array klonen
setTimeout(function(){
var item = items.shift();
process.call(context, item);

if (items.length > 0){
setTimeout(arguments.callee, 100);
}
}, 100);
}

Beachten Sie, dass diese Methode ist komplizierter als nur das Speichern eines Indexes ist viel sicherer, da sich der Inhalt des Arrays ändern kann, bevor der nächste Timer wirksam wird.

Die hier erwähnte Funktion chunk() ist nur ein Ausgangspunkt für die Optimierung der Schleifenleistung. Sie können es kontinuierlich verbessern, um bei Bedarf weitere Funktionen bereitzustellen. Nachdem beispielsweise alle Objekte im Array verarbeitet wurden, kann ein Funktionsrückruf hinzugefügt werden. Unabhängig davon, ob Sie die Funktion auf diese Weise ändern, handelt es sich lediglich um ein JavaScript-Code-Entwicklungsmodell, das dabei helfen kann, die Array-Verarbeitungsleistung zu optimieren und die Warnung zu vermeiden, dass das Skript außer Kontrolle ist.

Das Obige ist die Lösung für das Problem außer Kontrolle geratener JavaScript-Schleifen. Weitere verwandte Artikel finden Sie auf der chinesischen PHP-Website (www.php.cn)!