JQuery-Intervall zum Ausführen der Funktion. Beispiele der jQuery-Funktion setTimeout(). Übergabe von Parametern an setTimout

• Aus:
• Registriert: 08.07.2014
• Beiträge: 3.896
• Gefällt mir: 497

Die setInterval-Funktion dient dazu, Code in regelmäßigen Abständen mehrmals auszuführen. Es hat jedoch eine Reihe von Nachteilen, vor allem ein unterschiedliches Verhalten verschiedene Browser.

Der erste Unterschied ist der Unterschied in der Zeit, auf die der Timer für den nächsten Start eingestellt wird. Erstellen wir einen kleinen Test: Wir messen die Zeit, die seit dem Start des vorherigen Laufs und seit seinem Ende vergangen ist.

var d1 = neues Datum(), d2 = neues Datum(); setInterval(function() ( var d = new Date(); document.body.innerHTML += (d - d1) + " " + (d - d2) + "
"; // Setzen Sie eine Markierung am Anfang der Funktion d1 = new Date(); while (new Date() - d1< 200); // ничего не делаем 200 миллисекунд // И в конце функции d2 = new Date(); }, 1000);

Die Ausgabe ist ab der zweiten Zeile informativ.

In Firefox, Opera, Safari und Chrome ist die Situation ähnlich: Die erste Zahl entspricht ungefähr 1000, die zweite 200 weniger. Der einzige Unterschied wird in der Streuung der Werte liegen. Den geringsten Unterschied gibt es bei Chrome und Opera.

• Aus: Moskau, Sovkhoznay 3, Apt. 98
• Registriert: 08.07.2014
• Beiträge: 3.896
• Gefällt mir: 497

Ein weiterer Unterschied, der weniger auffällig und schwieriger zu reproduzieren ist, aber manchmal große Probleme verursachen kann, ist der Widerstand gegen Systemzeitänderungen. Wenn Sie den folgenden Test ausführen

setInterval(function() ( document.body.innerHTML = Math.random(); , 500);

Und nach dem Start stellen Sie die Systemzeit um eine Minute zurück, dann pausiert der Zahlenwechsel in den Browsern Firefox und Safari und beginnt nach einer Minute wieder von vorne. Natürlich ist die manuelle Übersetzung der Systemzeit eine äußerst seltene Situation, aber viele Systeme sind so konfiguriert, dass sie die Zeit automatisch mit Servern im Internet synchronisieren, sodass dieser Faktor in manchen Situationen nicht außer Acht gelassen werden kann.

Ein weiterer kleiner Nachteil der setInterval-Funktion besteht darin, dass Sie sich den Bezeichner irgendwo merken müssen, um ihre Aktion stoppen zu können, was nicht immer praktisch ist.

• Aus: Moskau, Sovkhoznay 3, Apt. 98
• Registriert: 08.07.2014
• Beiträge: 3.896
• Gefällt mir: 497

Um die aufgeführten Nachteile von setInterval zu beseitigen, können Sie mehrere setTimeouts verwenden.

Eine wichtige Alternative zu setInterval ist das rekursive setTimeout:

/** statt: var timerId = setInterval(function() ( alarm("tick"); ), 2000); */ var timerId = setTimeout(function tick() ( alarm("tick"); timerId = setTimeout(tick, 2000); ), 2000);

Im obigen Code wird die nächste Ausführung unmittelbar nach Abschluss der vorherigen Ausführung geplant.

Rekursives setTimeout ist eine flexiblere Timing-Methode als setInterval, da die Zeit bis zur nächsten Ausführung abhängig von den Ergebnissen der aktuellen Ausführung unterschiedlich geplant werden kann.

Wir haben beispielsweise einen Dienst, der alle 5 Sekunden den Server nach neuen Daten abfragt. Wenn der Server überlastet ist, können Sie das Abfrageintervall auf 10, 20, 60 Sekunden erhöhen ... und es dann wieder einstellen, wenn alles wieder normal ist.

Wenn wir regelmäßig CPU-intensive Aufgaben ausführen, können wir den Zeitaufwand für deren Ausführung abschätzen und die nächste Ausführung früher oder später planen.

• Aus: Moskau, Sovkhoznay 3, Apt. 98
• Registriert: 08.07.2014
• Beiträge: 3.896
• Gefällt mir: 497

Rekursiv setTimeout garantiert eine Pause zwischen Aufrufen, setInterval nicht.

Vergleichen wir die beiden Codes. Der erste verwendet setInterval:

var i = 1; setInterval(function() ( func(i); ), 100);

Der zweite verwendet ein rekursives setTimeout:

var i = 1; setTimeout(function run() ( func(i); setTimeout(run, 100); ), 100);

Mit setInterval wird der interne Timer genau alle 100 ms ausgelöst und func(i) aufgerufen:

Die tatsächliche Pause zwischen Funktionsaufrufen mit setInterval ist kürzer als im Code angegeben!

Das ist natürlich, denn die Betriebszeit der Funktion wird in keiner Weise berücksichtigt, sie „frisst“ einen Teil des Intervalls.

Es ist auch möglich, dass func komplexer war als erwartet und die Ausführung länger als 100 ms dauerte.

In diesem Fall wartet der Interpreter auf den Abschluss der Funktion, überprüft dann den Timer und, wenn die Zeit für den Aufruf von setInterval bereits gekommen (oder verstrichen) ist, erfolgt sofort der nächste Aufruf.

Wenn die Funktion länger als die setInterval-Pause ausgeführt wird, erfolgen die Aufrufe ohne Unterbrechung.

• Aus: Jerusalem
• Registriert: 02.06.2015
• Beiträge: 958
• Likes: 274

Es hängt alles von der jeweiligen Aufgabe ab. Zunächst wird SetTimeOut verwendet, um den Timer einmal zu starten, und SetInterval wird verwendet, um eine Schleife zu starten. Aber beide Funktionen können verwendet werden, um Skripte zyklisch auszuführen; wenn Sie sie beispielsweise in der SetTimeOut-Funktion rekursiv ausführen, dann verhalten sie sich fast ähnlich wie SetInterval.

Der Nachteil von SetInterval besteht derzeit darin, dass es die Ausführungszeit des Skripts (der Funktion) selbst nicht berücksichtigt. Wenn Sie es beispielsweise für umfangreiche Abfragen verwenden, wird die Intervallzeit erheblich verkürzt kann je nach Browser unterschiedlich sein.

Aber auch hier gilt: Wenn die Funktion oder Anforderung minimiert wird, ist es unwahrscheinlich, dass der Endbenutzer den Unterschied spürt.
Daher muss jeder selbst entscheiden, was er verwendet.

Es ist äußerst wichtig zu verstehen, wie sie funktionieren JavaScript-Timer. Ihr Verhalten entspricht oft nicht unserem intuitiven Verständnis von Multithreading, und das liegt daran, dass sie in Wirklichkeit in einem einzigen Thread ausgeführt werden. Schauen wir uns vier Funktionen an, mit denen wir Timer verwalten können:

• var id = setTimeout(fn, Verzögerung); – Erstellt einen einfachen Timer, der eine bestimmte Funktion nach einer bestimmten Verzögerung aufruft. Die Funktion gibt eine eindeutige ID zurück, mit der der Timer angehalten werden kann.
• var id = setInterval(fn, Verzögerung); – Ähnlich wie setTimeout, ruft die Funktion jedoch kontinuierlich in einem angegebenen Intervall auf (bis sie gestoppt wird).
• clearInterval(id);, clearTimeout(id); – Akzeptiert eine Timer-ID (zurückgegeben von einer der oben beschriebenen Funktionen) und stoppt die Ausführung des Rückrufs „a“.

Diese Abbildung enthält eine Menge Informationen, aber wenn Sie sie verstehen, erhalten Sie ein tieferes Verständnis dafür, wie JavaScript-Asynchronität funktioniert. Dieses Diagramm stellt die Zeit vertikal in Millisekunden dar, die blauen Blöcke zeigen Blöcke von JavaScript-Code, die ausgeführt wurden. Beispielsweise wird der erste Block im Durchschnitt in 18 ms ausgeführt, ein Mausklick blockiert die Ausführung für etwa 11 ms usw.

JavaScript kann nur einen Codeblock ausführen (aufgrund der Single-Threaded-Ausführung), der jeweils die Ausführung anderer asynchroner Ereignisse blockiert. Das heißt, wenn ein asynchrones Ereignis auftritt (z. B. ein Mausklick, ein Timer-Aufruf oder der Abschluss einer XMLHttp-Anfrage), wird es einer Warteschlange hinzugefügt und später ausgeführt (die Implementierung variiert natürlich je nach Browser, aber wir stimmen dem zu). nennen Sie es eine „Warteschlange“).

Stellen wir uns zunächst vor, dass zwei Timer innerhalb eines JavaScript-Blocks starten: setTimeout mit einer Verzögerung von 10 ms und setInterval mit derselben Verzögerung. Abhängig davon, wann der Timer startet, wird er in dem Moment ausgelöst, in dem wir den ersten Codeblock noch nicht abgeschlossen haben. Beachten Sie jedoch, dass es nicht sofort ausgelöst wird (dies ist aufgrund des Single-Threadings nicht möglich). Stattdessen wird die verzögerte Funktion in die Warteschlange gestellt und zum nächsten verfügbaren Zeitpunkt ausgeführt.

Außerdem erfolgt während der Ausführung des ersten JavaScript-Blocks ein Mausklick. Der Handler für dieses asynchrone Ereignis (und es ist asynchron, weil wir es nicht vorhersagen können) kann zu diesem Zeitpunkt nicht direkt ausgeführt werden, sodass es wie der Timer ebenfalls in einer Warteschlange landet.

Nachdem der erste Block JavaScript-Code ausgeführt wurde, stellt der Browser die Frage: „Was wartet darauf, ausgeführt zu werden?“ In diesem Fall befinden sich der Mausklick-Handler und der Timer im Wartezustand. Der Browser wählt einen davon aus (den Click-Handler) und führt ihn aus. Der Timer wartet auf den nächsten verfügbaren Zeitblock in der Ausführungswarteschlange.

Beachten Sie, dass während der Ausführung des Mausklick-Handlers der erste Intervall-Callback ausgelöst wird. Genau wie der Timer-Rückruf wird er in die Warteschlange gestellt. Beachten Sie jedoch, dass das Intervall aus der Warteschlange entfernt wird, wenn es erneut ausgelöst wird (während der Timer-Rückruf ausgeführt wird). Wenn „jeder „Intervall-Callback““ in die Warteschlange gestellt würde, während ein großer Teil des Codes ausgeführt wird, würde dies dazu führen, dass eine Reihe von Funktionen darauf warten, aufgerufen zu werden, und dass zwischen ihnen keine Verzögerungszeiten liegen, bis ihre Ausführung abgeschlossen ist. Stattdessen neigen Browser dazu, zu warten, bis keine vorhanden sind Weitere Funktionen verbleiben in der Warteschlange, bevor eine weitere zur Warteschlange hinzugefügt wird.

Somit können wir den Fall beobachten, dass die dritte Auslösung des Intervall-Callbacks mit dem Moment zusammenfällt, in dem er bereits ausgeführt wird. Dies verdeutlicht einen wichtigen Punkt: Intervallen ist es egal, was gerade läuft, sie werden der Warteschlange hinzugefügt, ohne Rücksicht auf die Verzögerungszeit zwischen den Ausführungen.

Nachdem der zweite Intervall-Callback abgeschlossen ist, werden wir schließlich feststellen, dass nichts mehr für die Ausführung durch die JavaScript-Engine übrig ist. Dies bedeutet, dass der Browser erneut auf das Auftreten neuer asynchroner Ereignisse wartet. Dies geschieht bei der 50-ms-Marke, wo der Intervall-Callback wieder funktioniert. Zu diesem Zeitpunkt gibt es nichts, was es blockieren könnte, sodass es sofort funktioniert.

Schauen wir uns ein Beispiel an, das den Unterschied zwischen setTimeout und setInterval gut veranschaulicht.
setTimeout(function())( /* Ein langer Codeblock... */ setTimeout(arguments.callee, 10); ), 10); setInterval(function())( /* Ein langer Codeblock... */ ), 10);
Diese beiden Optionen sind auf den ersten Blick gleichwertig, in Wirklichkeit jedoch nicht. Code, der setTimeout verwendet, hat immer eine Verzögerung von mindestens 10 ms nach dem vorherigen Aufruf (es kann mehr, aber niemals weniger sein), während Code, der setInterval verwendet, dazu tendiert, alle 10 ms aufgerufen zu werden, unabhängig davon, wann der vorherige Aufruf erfolgte.

Fassen wir alles zusammen, was oben gesagt wurde:
- JavaScript-Engines verwenden eine Single-Threaded-Umgebung und wandeln asynchrone Ereignisse in eine Warteschlange um, die auf ihre Ausführung wartet.
- Die Funktionen setTimeout und setInterval werden in asynchronem Code grundsätzlich unterschiedlich ausgeführt.
- Wenn der Timer nicht ausgeführt werden kann dieser Moment, es wird bis zum nächsten Ausführungspunkt verzögert (der länger als die gewünschte Verzögerung sein wird),
- Intervalle (setInterval) können ohne Verzögerung nacheinander ausgeführt werden, wenn ihre Ausführung länger als die angegebene Verzögerung dauert.

Das alles ist extrem wichtige Informationen zur Entwicklung. Wenn Sie wissen, wie die JavaScript-Engine funktioniert, insbesondere bei vielen asynchronen Ereignissen (was häufig vorkommt), ist dies eine gute Grundlage für die Erstellung komplexer Anwendungen.

Die setInterval()-Methode, die auf den Window- und Worker-Schnittstellen angeboten wird, ruft wiederholt eine Funktion auf oder führt einen Codeausschnitt aus, mit einer festen Zeitverzögerung zwischen den einzelnen Aufrufen. Es gibt eine Intervall-ID zurück, die das Intervall eindeutig identifiziert, sodass Sie es später durch Aufrufen von clearInterval() entfernen können. Diese Methode wird durch das WindowOrWorkerGlobalScope-Mixin definiert.

Hinweis: Die Übergabe zusätzlicher Argumente an setInterval() in der ersten Syntax funktioniert nicht Internet Explorer 9 und früher. Wenn Sie diese Funktionalität in diesem Browser aktivieren möchten, müssen Sie ein Polyfill verwenden (siehe Abschnitt).

Die zurückgegebene Intervall-ID ist ein numerischer Wert ungleich Null, der den Timer identifiziert, der durch den Aufruf von setInterval() erstellt wurde. Dieser Wert kann übergeben werden, um die Zeitüberschreitung abzubrechen.

Es kann hilfreich sein zu wissen, dass setInterval() und setTimeout() denselben ID-Pool verwenden und dass clearInterval() und clearTimeout() technisch austauschbar verwendet werden können. Aus Gründen der Übersichtlichkeit sollten Sie jedoch versuchen, sie immer abzugleichen, um Verwirrung bei der Pflege Ihres Codes zu vermeiden.

Hinweis: Das Verzögerungsargument wird in eine vorzeichenbehaftete 32-Bit-Ganzzahl konvertiert. Dadurch wird die Verzögerung effektiv auf 2147483647 ms begrenzt, da sie im IDL als vorzeichenbehaftete Ganzzahl angegeben ist.

Das folgende Beispiel demonstriert die grundlegende Syntax von setInterval().

Var IntervalID = window.setInterval(myCallback, 500, „Parameter 1“, „Parameter 2“); function myCallback(a, b) ( // Ihr Code hier // Parameter sind rein optional. console.log(a); console.log(b); )

Im folgenden Beispiel wird die Funktion flashtext() einmal pro Sekunde aufgerufen, bis die Schaltfläche „Stopp“ gedrückt wird.

setInterval/clearInterval Beispiel var nIntervId; Funktion changeColor() ( nIntervId = setInterval(flashText, 1000); ) Funktion flashText() ( var oElem = document.getElementById("my_box"); oElem.style.color = oElem.style.color == "red" ? " blue" : "red"; // oElem.style.color == "red" ? "blue" : "red" ist ein ternärer Operator. ) function stopTextColor() ( clearInterval(nIntervId); )

Hallo Welt

Das folgende Beispiel simuliert eine Schreibmaschine, indem zunächst Inhalte gelöscht und dann langsam in die NodeList eingegeben werden, die einer angegebenen Gruppe von Selektoren entsprechen.

JavaScript Typewriter – MDN Beispielfunktion Typewriter (sSelector, nRate) ( function clean () ( clearInterval(nIntervId); bTyping = false; bStart = true; oCurrent = null; aSheets.length = nIdx = 0; ) function scroll (oSheet, nPos , bEraseAndStop) ( if (!oSheet.hasOwnProperty("parts") || aMap.length< nPos) { return true; } var oRel, bExit = false; if (aMap.length === nPos) { aMap.push(0); } while (aMap < oSheet.parts.length) { oRel = oSheet.parts]; scroll(oRel, nPos + 1, bEraseAndStop) ? aMap++ : bExit = true; if (bEraseAndStop && (oRel.ref.nodeType - 1 | 1) === 3 && oRel.ref.nodeValue) { bExit = true; oCurrent = oRel.ref; sPart = oCurrent.nodeValue; oCurrent.nodeValue = ""; } oSheet.ref.appendChild(oRel.ref); if (bExit) { return false; } } aMap.length--; return true; } function typewrite () { if (sPart.length === 0 && scroll(aSheets, 0, true) && nIdx++ === aSheets.length - 1) { clean(); return; } oCurrent.nodeValue += sPart.charAt(0); sPart = sPart.slice(1); } function Sheet (oNode) { this.ref = oNode; if (!oNode.hasChildNodes()) { return; } this.parts = Array.prototype.slice.call(oNode.childNodes); for (var nChild = 0; nChild < this.parts.length; nChild++) { oNode.removeChild(this.parts); this.parts = new Sheet(this.parts); } } var nIntervId, oCurrent = null, bTyping = false, bStart = true, nIdx = 0, sPart = "", aSheets = , aMap = ; this.rate = nRate || 100; this.play = function () { if (bTyping) { return; } if (bStart) { var aItems = document.querySelectorAll(sSelector); if (aItems.length === 0) { return; } for (var nItem = 0; nItem < aItems.length; nItem++) { aSheets.push(new Sheet(aItems)); /* Uncomment the following line if you have previously hidden your elements via CSS: */ // aItems.style.visibility = "visible"; } bStart = false; } nIntervId = setInterval(typewrite, this.rate); bTyping = true; }; this.pause = function () { clearInterval(nIntervId); bTyping = false; }; this.terminate = function () { oCurrent.nodeValue += sPart; sPart = ""; for (nIdx; nIdx < aSheets.length; scroll(aSheets, 0, false)); clean(); }; } /* usage: */ var oTWExample1 = new Typewriter(/* elements: */ "#article, h1, #info, #copyleft", /* frame rate (optional): */ 15); /* default frame rate is 100: */ var oTWExample2 = new Typewriter("#controls"); /* you can also change the frame rate value modifying the "rate" property; for example: */ // oTWExample2.rate = 150; onload = function () { oTWExample1.play(); oTWExample2.play(); }; span.intLink, a, a:visited { cursor: pointer; color: #000000; text-decoration: underline; } #info { width: 180px; height: 150px; float: right; background-color: #eeeeff; padding: 4px; overflow: auto; font-size: 12px; margin: 4px; border-radius: 5px; /* visibility: hidden; */ }

CopyLeft 2012 vom Mozilla Developer Network

[ Abspielen | Pause | Beenden]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque Bewohner morbi tristique Senectus et Netus et Malesuada Fames Ac Turpis Egestas. Donec a mi magna, quis mattis dolor. Etiam sitzt mit Ligula in Kontakt, die der Autor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nun, jetzt ist es so, dass die ganze Familie nichts mehr zu bieten hat. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendririt vitae, volutpat non ipsum.

Phasellus ac nisl lorem:
Nullam Commodo Suscipit Lacus Non Aliquet. Phasellus ac nisl lorem, Sed facilisis ligula. Nam cursus lobortis Placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, bei ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus wird immer größer, wenn dein Lebendschwarm zu viel wird. Präsent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sitzt mitten in der Tür und lobortis vorübergehend auf dem Tortor. Cras sodales eleifend interdum.

Duis lobortis sapien quis nisl luctus porttitor. In der vorübergehenden Freiheit werde ich mich immer wieder wohlfühlen. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Keine Erleichterung. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibStartum quis. Cras adipiscing ultricies fermentum. Praesent bibStartum condimentum feugiat.

Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque Accumsan Faucibus Erat, Vel Varius Tortor Ultricies AC. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam Tortor nunc, Elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.

Wie bereits erwähnt, unterstützen Internet Explorer-Versionen 9 und niedriger die Übergabe von Argumenten an die Callback-Funktion weder in setTimeout() noch in setInterval() . Der folgende IE-spezifische Code zeigt eine Methode zur Überwindung dieser Einschränkung. Fügen Sie zur Verwendung einfach den folgenden Code oben in Ihr Skript ein.

Eine andere Möglichkeit besteht darin, eine anonyme Funktion zum Aufrufen Ihres Rückrufs zu verwenden, obwohl diese Lösung etwas teurer ist. Beispiel:

Var IntervalID = setInterval(function() ( myFunc("one", "two", " three"); ), 1000); var IntervalID = setInterval(function(arg1) ().bind(undefiniert, 10), 1000);

Ab Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) werden die Intervalle so begrenzt, dass sie in inaktiven Registerkarten nicht öfter als einmal pro Sekunde ausgelöst werden.

Wenn Sie eine Methode an setInterval() oder eine andere Funktion übergeben, wird diese mit dem falschen Wert this aufgerufen. Dieses Problem wird in der JavaScript-Referenz ausführlich erläutert.

Von setInterval() ausgeführter Code wird in einem anderen Ausführungskontext ausgeführt als die Funktion, von der aus er aufgerufen wurde. Infolgedessen wird das Schlüsselwort this für die aufgerufene Funktion auf das Fensterobjekt (oder das globale Objekt) gesetzt und ist nicht mit dem Wert this für die Funktion identisch, die setTimeout aufgerufen hat. Sehen Sie sich das folgende Beispiel an (das setTimeout() anstelle von setInterval() verwendet – das Problem ist tatsächlich für beide Timer dasselbe):

MyArray = ["null", "eins", "zwei"]; myArray.myMethod = function (sProperty) ( alarm(arguments.length > 0 ? this : this); ); myArray.myMethod(); // gibt „null, eins, zwei“ aus myArray.myMethod(1); // gibt „eins“ aus setTimeout(myArray.myMethod, 1000); // druckt „“ nach 1 Sekunde setTimeout(myArray.myMethod, 1500, „1“); // gibt nach 1,5 Sekunden „undefiniert“ aus. // Das Übergeben des „this“-Objekts mit .call wird nicht funktionieren, // da dies den Wert von this in setTimeout selbst ändert //, während wir den Wert von this in myArray ändern möchten .myMethod // Tatsächlich handelt es sich um einen Fehler, da der setTimeout-Code erwartet, dass dies das Fensterobjekt ist: setTimeout.call(myArray, myArray.myMethod, 2000); // Fehler: „NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNativeprototype object“ setTimeout.call(myArray, myArray.myMethod, 2500, 2); // gleicher Fehler

Wie Sie sehen, gibt es im alten JavaScript keine Möglichkeit, dieses Objekt an die Rückruffunktion zu übergeben.

Eine mögliche Möglichkeit, das „diese“-Problem zu lösen, besteht darin, die beiden nativen globalen Funktionen setTimeout() oder setInterval() durch zwei zu ersetzen Nicht-Muttersprachler solche, die ihren Aufruf über die Methode Function.prototype.call ermöglichen. Das folgende Beispiel zeigt einen möglichen Ersatz:

// Den Durchgang des „this“-Objekts durch die JavaScript-Timer aktivieren var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval; window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) ( var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2); return __nativeST__(vCallback instanceof Function ? function () ( vCallback.apply(oThis, aArgs); ) : vCallback, nDelay); ); window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) ( var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2); return __nativeSI__(vCallback instanceof Function ? function () ( vCallback.apply(oThis, aArgs); ) : vCallback, nDelay); );

Diese beiden Ersetzungen ermöglichen auch die HTML5-Standardübergabe beliebiger Argumente an die Rückruffunktionen von Timern im IE. Sie können also als verwendet werden nicht normkonform Polyfills auch. Siehe die für a normkonform Polyfill

Neuer Funktionstest:

MyArray = ["null", "eins", "zwei"]; myArray.myMethod = function (sProperty) ( alarm(arguments.length > 0 ? this : this); ); setTimeout(alert, 1500, „Hallo Welt!“); // Die Standardverwendung von setTimeout und setInterval bleibt erhalten, aber... setTimeout.call(myArray, myArray.myMethod, 2000); // gibt „null, eins, zwei“ nach 2 Sekunden aus setTimeout.call(myArray, myArray.myMethod, 2500, 2); // gibt nach 2,5 Sekunden „zwei“ aus

Für eine komplexere, aber immer noch modulare Version davon ( Dämon) siehe JavaScript-Daemons-Verwaltung . Diese komplexere Version ist nichts anderes als eine große und skalierbare Sammlung von Methoden für die Dämon Konstrukteur. Allerdings ist die Dämon Der Konstruktor selbst ist nichts anderes als ein Klon von MiniDaemon mit einer zusätzlichen Unterstützung für drin Und am Start Funktionen, die während der Instanziierung deklariert wurden Daemon. Also die MiniDaemon Framework bleibt der empfohlene Weg für einfache Animationen, weil Dämon ohne seine Methodensammlung ist im Wesentlichen ein Klon davon.

MiniDaemon übergibt Argumente an die Callback-Funktion. Wenn Sie mit Browsern arbeiten möchten, die diese Funktion nicht nativ unterstützen, verwenden Sie eine der oben vorgeschlagenen Methoden.

var myDaemon = neuer MiniDaemon( thisObject, Ruf zurück[ , Rate [, Länge]]);

Die Funktion setInterval() wird häufig verwendet, um eine Verzögerung für Funktionen festzulegen, die immer wieder ausgeführt werden, beispielsweise Animationen. Sie können das Intervall mit WindowOrWorkerGlobalScope.clearInterval() abbrechen.

Wenn Sie möchten, dass Ihre Funktion aufgerufen wird einmal Nach der angegebenen Verzögerung verwenden Sie .

Es ist möglich, dass Intervalle verschachtelt sind. Das heißt, der Rückruf für setInterval() kann wiederum setInterval() aufrufen, um die Ausführung eines weiteren Intervalls zu starten, auch wenn das erste noch läuft. Um die potenziellen Auswirkungen abzumildern, die dies haben kann Leistung: Sobald Intervalle tiefer als fünf Ebenen verschachtelt sind, erzwingt der Browser automatisch einen Mindestwert von 4 ms für das Intervall. Versuche, in tief verschachtelten Aufrufen von setInterval() einen Wert von weniger als 4 ms anzugeben, werden auf 4 ms festgelegt.

Unter bestimmten Umständen erzwingen Browser möglicherweise noch strengere Mindestwerte für das Intervall, obwohl diese nicht üblich sein sollten. Beachten Sie außerdem, dass die tatsächliche Zeitspanne, die zwischen den Rückrufaufrufen vergeht, möglicherweise länger als die angegebene Verzögerung ist. Beispiele finden Sie unter Gründe für Verzögerungen, die länger sind als in WindowOrWorkerGlobalScope.setTimeout() angegeben.

Wenn die Möglichkeit besteht, dass die Ausführung Ihrer Logik länger als die Intervallzeit dauert, wird empfohlen, eine benannte Funktion rekursiv mit setTimeout() aufzurufen. Wenn Sie beispielsweise setInterval() verwenden, um alle 5 Sekunden einen Remote-Server abzufragen, können Netzwerklatenz, ein nicht reagierender Server und eine Vielzahl anderer Probleme dazu führen, dass die Anforderung nicht in der vorgesehenen Zeit abgeschlossen wird. Daher kann es sein, dass XHR-Anfragen in der Warteschlange stehen und nicht unbedingt in der richtigen Reihenfolge zurückgegeben werden.

Beim Programmieren in Skriptsprachen besteht regelmäßig die Notwendigkeit, eine Pause zu erstellen – um die Ausführung des Programms für eine Weile anzuhalten und dann mit der Arbeit fortzufahren. In VBS- und PHP-Skripten sind beispielsweise folgende Methoden möglich:

VBS: wscript.sleep 1500 (1,5 Sekunden lang anhalten)

PHP: Sleep(10); (10 Sekunden lang anhalten)

Während solcher Pausen wird das Laufzeitsystem (PHP oder VBS) nichts tun. Ein Entwickler, der versucht, etwas Ähnliches in Javascript intuitiv zu verwenden, wird unangenehm überrascht sein. Häufiger Fehler Beim Versuch, eine Pause in Javascript zu erstellen, sieht es so aus:

Funktion badtest() ( für (var i=1; i< 10; i++) { window.setTimeout("document.getElementById("test1").value += " + i, 900) } }

Sie denken, dass, wenn während der Schleife die nächste Zahl gezogen wird, Ihr setTimeout das Javascript ehrlich gesagt nicht mehr funktionieren lässt, 0,9 Sekunden wartet, die gewünschte Zahl am Ende des Eingabefelds hinzufügt und dann mit der Arbeit fortfährt. Aber in Wirklichkeit stimmt das nicht: setInterval und setTimeout in Javascript verzögern lediglich die Ausführung der in Klammern angegebenen Aktion (oder Funktion). In unserem Beispiel wird Folgendes passieren:

Sofort bedeutet beispielsweise 1 ms (also unverhältnismäßig klein im Vergleich zu 900 ms): Die Schleife erledigt ihre Arbeit fast augenblicklich und erstellt mehrere verzögerte Aufgaben zum gleichen Zeitpunkt. Das bedeutet, dass alle anstehenden „Zeichnungs“-Aufgaben nahezu gleichzeitig erledigt werden, ohne Pausen zwischen dem Hinzufügen neuer Zahlen. Der Zyklus beginnt; alles friert für 0,9 s ein; und schirren – alle Zahlen werden nacheinander hintereinander geschossen.

Wie wendet man setTimeout in einem solchen Fall richtig an? Das ist schwer. Sie müssen die Funktion aufrufen rekursiv(innerhalb der Funktion die gleiche Funktion), und damit dieser Prozess nicht endlos ist, legen Sie eine Stoppbedingung fest (z. B. die Größe der zu druckenden Zahl):

Funktion welltest() ( if (i< 9) { document.getElementById("test2").value += ++i window.setTimeout("welltest()", 400) } }

Und die Variable i muss außerhalb der Funktion initialisiert werden – zum Beispiel so:

Jetzt funktioniert alles wie es soll (wir haben die Verzögerungszeit von 0,9 s auf 0,4 s reduziert). Für solche Aufgaben ist es jedoch logischer, setInterval anstelle von setTimeout zu verwenden (obwohl dies zwei Funktionen erfordert):

Funktion besttest() ( window.i = 0 window.timer1 = window.setInterval("draw()", 400) ) function draw() ( document.getElementById("test3").value += ++i if (i >= 9) clearInterval(window.timer1) )

Die Besonderheit der setInterval-Methode von Javascirpt besteht darin, dass sie nicht „von selbst“ übergeben wird, sondern mit einer speziellen Methode „clearInterval“ gestoppt werden muss. Und um zu verdeutlichen, was genau gestoppt werden soll, wird der Aufgabe für die verzögerte Aktion eine spezielle Kennung zugewiesen – ein Timer: window.timer1 = window.setInterval(...) .

Bezeichner können auch Aufgaben zugewiesen werden, die mit der Methode setTimeout erstellt wurden. Alle Timer-IDs müssen voneinander verschieden sein (eindeutig innerhalb des aktuellen Browserfensters). Dann können Sie im Fenster mehrere verschiedene Aufgaben erstellen, die verzögerte Aktionen verwenden, und diese Aufgaben werden parallel ausgeführt (sozusagen gleichzeitig, wenn der Computer über genügend Ressourcen verfügt), was in PHP oder VBS grundsätzlich unmöglich ist.

Hier ist ein Beispiel für eine Seite, auf der mehrere Javascript-Timer gleichzeitig laufen: setinterval.htm(Javascript-Funktionen in Datei setinterval.js). Alle Seiten-Timer (außer Menü) können mit der Esc-Taste gestoppt werden. Alle Beispiel-Timer basieren auf einem „natürlichen“ (und nicht abstrakten i++) Countdown – Zeit oder Distanz. Alle „Uhren“ sind speziell desynchronisiert (aus Gründen der Übersichtlichkeit). Distanzabhängige Timer werden im „Indikator“ und im Dropdown-Menü („Pull-Out“) verwendet.

Unser Schiebemenü ist eigentlich ein Schiebemenü (unter der „Kopfzeile“): Zwischen den Elementen werden speziell Lücken gelassen, damit Sie sehen können, wie es herausgleitet. Unerwartet stellte sich heraus, dass wir den Ausstieg bei Listen unterschiedlicher Länge nicht gleichermaßen reibungslos gestalten konnten – vermutlich aufgrund der geringen Leistung des Rechners (AMD Athlon 999 MHz).

Es liegt auf der Hand, dass es für Schönheit und Harmonie notwendig ist, dass die Listen verschiedener Menüpunkte gleichzeitig angezeigt werden. Das heißt, längere Listen sollten mit mehr herausfallen hohe Geschwindigkeit, kürzere - mit geringerer Geschwindigkeit. Es scheint, dass dies folgendermaßen umgesetzt werden könnte:

Wenn die Dropdown-Liste 200 Pixel hoch ist, sollten wir sie nach dieser Logik alle 1 ms um ein Pixel nach unten verschieben. Eine solche Geschwindigkeit funktioniert auf unserem Computer jedoch nicht – der Browser hat einfach keine Zeit, die neue Position der Liste in einer Millisekunde zu zeichnen. Ja. Javascript schafft es zu zählen (was gibt es zu zählen?), aber der Browser (Firefox) hat keine Zeit zum Anzeigen. Typische Situation für das Web.

Daher ist es nur mit Hilfe von Krücken möglich, die Essensausgabezeit mehr oder weniger anzugleichen, und es ist noch unklar, wie dies für mehr funktionieren wird schneller Computer. Aber wir sollten uns auf den langsamsten verlassen, oder? Der Algorithmus (ohne Berücksichtigung der Geschwindigkeit des Computers) sieht in etwa so aus:

Jetzt kommen die Listen mehr oder weniger heraus. Für mehr oder weniger ähnliche Zeit. Auf der Seite setinterval.htm.

Und hier kommt Bruce:

Funktion slide_do(obj, maxtop, offset) ( if (getTopLeft(obj).top< maxtop) { obj.style.top = getTopLeft(obj).top + offset } else { if (obj && obj.timer1) { clearInterval(obj.timer1) obj.timer1 = null } } }

Die Funktion selbst, die verschachtelte Listen aus dem Menü schiebt, ist, wie wir sehen können, sehr einfach. Jetzt müssen Sie es nur noch mit etwa dieser Zeile ausführen:

Ts.timer1 = setInterval(function())(slide_do(ts, maxtop, offset)), Verzögerung)

Nun, bevor Sie beginnen, berechnen Sie einfach alle diese Maxtop- und Offset-Werte und platzieren Sie die Liste auch an der Mintop-Position. Dies ist es, was die „vorläufige“ Funktion slide() mit 40 Zeilen bewirkt. Und alles zusammen – in einer Datei setinterval.js. Ja, und dieser Mist funktioniert ohne die mitgelieferte Styles-Datei überhaupt nicht