Warum ist setTimeout(fn, 0) manchmal nützlich?

Question

Ich bin kürzlich auf einen ziemlich fiesen Fehler gestoßen, bei dem der Code eine <select> dynamisch über JavaScript. Dieses dynamisch geladene <select> einen vorgewählten Wert hatte. Im IE6 hatten wir bereits Code, um den ausgewählten Wert zu fixieren <option> denn manchmal ist die <select> 's selectedIndex Wert nicht mit dem gewählten Wert übereinstimmen würde <option> 's index Attribut, wie unten dargestellt:

field.selectedIndex = element.index;

Dieser Code funktionierte jedoch nicht. Auch wenn das Feld selectedIndex richtig eingestellt war, wurde der falsche Index ausgewählt. Wenn ich jedoch einen alert() Anweisung zum richtigen Zeitpunkt die richtige Option ausgewählt werden würde. Da ich dachte, dass es sich um ein Zeitproblem handeln könnte, habe ich etwas Zufälliges ausprobiert, das ich bereits im Code gesehen hatte:

var wrapFn = (function() {
    var myField = field;
    var myElement = element;

    return function() {
        myField.selectedIndex = myElement.index;
    }
})();
setTimeout(wrapFn, 0);

Und es hat funktioniert!

Ich habe eine Lösung für mein Problem gefunden, aber ich weiß nicht genau, warum sie mein Problem behebt. Hat jemand eine offizielle Erklärung? Welches Browserproblem vermeide ich, indem ich meine Funktion "später" aufrufe, indem ich setTimeout() ?

Answer 1

Da es eine Dauer von 0 Ich nehme an, dass dies geschieht, um den Code zu entfernen, der an die setTimeout aus dem Fluss der Ausführung. Wenn es sich also um eine Funktion handelt, die eine Weile dauern könnte, wird sie die Ausführung des nachfolgenden Codes nicht verhindern.

Answer 2

Außerdem wird der Funktionsaufruf an das Ende des Stacks verschoben, um einen Stack-Überlauf zu verhindern, wenn Sie eine Funktion rekursiv aufrufen. Dies hat den Effekt einer while Schleife, sondern lässt die JavaScript-Engine andere asynchrone Timer auslösen.

Answer 3

Durch den Aufruf von setTimeout geben Sie der Seite Zeit, auf das zu reagieren, was der Benutzer gerade tut. Dies ist besonders hilfreich für Funktionen, die beim Laden der Seite ausgeführt werden.

Answer 4

Das Problem war, dass Sie versucht haben, eine Javascript-Operation auf einem nicht vorhandenen Element durchzuführen. Das Element wurde noch nicht geladen und setTimeout() gibt einem Element auf folgende Weise mehr Zeit zum Laden:

1. setTimeout() bewirkt, dass das Ereignis ansynchron wird daher nach dem gesamten synchronen Code ausgeführt, wodurch Ihr Element mehr Zeit zum Laden erhält. Asynchrone Callbacks wie der Callback in setTimeout() werden in der Ereigniswarteschlange und auf den Stapel mit dem Ereignisschleife nachdem der Stapel mit synchronem Code leer ist.
2. Der Wert 0 für ms als zweites Argument in der Funktion setTimeout() ist oft etwas höher (4-10 ms je nach Browser). Diese etwas längere Zeit, die für die Ausführung der setTimeout() Rückrufe wird durch die Anzahl der "Ticks" (wobei ein Tick bedeutet, dass ein Rückruf auf den Stapel geschoben wird, wenn der Stapel leer ist) der Ereignisschleife verursacht. Aus Gründen der Leistung und der Batterielebensdauer ist die Anzahl der Ticks in der Ereignisschleife auf eine bestimmte Anzahl beschränkt weniger als 1000 Mal pro Sekunde.

Answer 5

Einige andere Fälle, in denen setTimeout nützlich ist:

Sie möchten eine lang laufende Schleife oder Berechnung in kleinere Komponenten aufteilen, damit der Browser nicht "einfriert" oder sagt: "Skript auf der Seite ist beschäftigt".

Sie möchten eine Formularübermittlungsschaltfläche deaktivieren, wenn sie angeklickt wird, aber wenn Sie die Schaltfläche im onClick-Handler deaktivieren, wird das Formular nicht übermittelt. setTimeout mit einer Zeit von Null erfüllt den Zweck, so dass das Ereignis beendet wird, das Formular mit dem Übermitteln beginnt und die Schaltfläche dann deaktiviert werden kann.