Ausführliche Erklärung zum Erstellen und Verwenden eines erweiterten Timer-Beispielcodes in Javascript

setTimeout() und setInterval() können zum Erstellen von Timern verwendet werden, und ihre grundlegende Verwendung wird hier nicht vorgestellt. Hier stellen wir hauptsächlich die Codewarteschlange von Javascript vor. Kein Code in JavaScript wird sofort ausgeführt, er wird ausgeführt, sobald der Prozess inaktiv ist. Daher bedeutet die im Timer eingestellte Zeit nicht, dass die Ausführungszeit übereinstimmen muss, sondern dass der Code der Warteschlange hinzugefügt wird, um nach dem angegebenen Zeitintervall zu warten. Befindet sich zu diesem Zeitpunkt nichts anderes in der Warteschlange, wird dieser Code ausgeführt und es sieht so aus, als wäre der Code zum genau angegebenen Zeitpunkt ausgeführt worden. Es werden also einige Probleme auftreten.

Wiederholungstimer

Normalerweise verwenden wir die setInterval-Methode, um einen bestimmten Codeabschnitt im gleichen Zeitintervall wiederholt auszuführen. Bei der Verwendung dieser Methode gibt es jedoch zwei Probleme: Das erste besteht darin, dass einige Intervalle übersprungen werden. Das zweite besteht darin, dass das Intervall zwischen Codeausführungen für mehrere Timer möglicherweise kleiner ist als erwartet.
Hier geben wir ein Beispiel: Wenn ein Onclick-Ereignishandler setInterval verwendet, um einen sich wiederholenden Timer mit einem Intervall von 200 ms festzulegen, wird ein Zeitintervall gleichzeitig übersprungen, wenn der Ereignishandler 300 ms für den Abschluss benötigt. Ein Timer-Code läuft.
Wir können auch Schlussfolgerungen aus dem folgenden Code ziehen:

//重复定时器
var i =0;
setInterval(function(){
 //如果事件处理时间长于间隔时间
 i++;
 for(var j=0;j<100000000;j++){}
 document.write(i+&#39; &#39;);
},100);
//可以明显感觉到时间间隔不相等
为了避免这种时间间隔的问题，我们可以采用链式调用setTimeout方法来取代setInterval。

//可以采用链式调用setTimeout来取代setInterval
var i = 0;
setTimeout(function(){
 //处理内容
 i++;
 for(var j=0;j<100000000;j++){}
 document.write(i+&#39; &#39;);
 //
 setTimeout(arguments.callee,100);
},100);
//这样处理效果明显好多了。

Jedes Mal, wenn die Funktion ausgeführt wird, wird ein neuer Timer erstellt, und der zweite setTimeout Der Aufruf verwendet arguments.callee, um einen Verweis auf die aktuell ausgeführte Funktion abzurufen und einen anderen Timer dafür festzulegen. Dadurch wird sichergestellt, dass kein neuer Timer-Code in die Warteschlange eingefügt wird, bis der vorherige Timer-Code ausgeführt wird. Dadurch wird sichergestellt, dass keine Intervalle fehlen und mindestens die angegebene Zeit gewartet wird, bevor der nächste Timer-Code ausgeführt wird. Intervalle, um Dauerläufe zu vermeiden. Man kann sagen, dass es zwei Fliegen mit einer Klappe schlägt. Heutzutage implementieren Animationen in Mainstream-Frameworks im Allgemeinen wiederholtes Timing.

Funktionsdrosselung

Timer dienen nicht nur der Zeitmessung, sondern können auch zur Entlastung des Browsers eingesetzt werden. Einige Berechnungen und Verarbeitungen im Browser sind viel teurer als andere. Beispielsweise erfordern DOM-Vorgänge mehr Speicher und CPU-Zeit. Die kontinuierliche Verwendung zu vieler DOM-Vorgänge kann dazu führen, dass der Browser hängen bleibt oder sogar abstürzt.
Die Grundidee der Funktionsdrosselung besteht darin, dass bestimmte Codes nicht kontinuierlich und wiederholt ohne Unterbrechung ausgeführt werden können. Beim ersten Aufruf der Funktion wird ein Timer erstellt, um Code nach einem bestimmten Intervall auszuführen. Wenn die Funktion ein zweites Mal aufgerufen wird, löscht sie den vorherigen Timer und setzt einen. Der Zweck besteht darin, die Funktion erneut auszuführen, nachdem die Anforderung zur Ausführung der Funktion für einen bestimmten Zeitraum angehalten wurde.
Der Code lautet wie folgt:

//再来谈谈函数节流
function throttle(method,context){
 clearTimeout(method.tId);
 method.tId = setTimeout(function(){
  method.call(context);
 },100);
}
//该函数接受两个参数，第一个是要执行的函数，第二个是作用域。
//使用方法demo
//未使用情况：
window.onresize = function(){
 var p = document.getElementByTagName(body);
 p.style.height = p.offsetWidth +'px';
}
//使用情况;
function resizep(){
 var p = document.getElementByTagName(body);
 p.style.height = p.offsetWidth +'px';
}
window.onresize = function(){
 throttle(resizep);
};
//只要代码是周期性执行的，都应该使用节流。

Das gibt dem Benutzer kein gutes Gefühl, aber es reduziert den Druck auf den Browser und die Funktion erheblich Drosselung Dies ist auch eine der Techniken, die häufig von vielen Frameworks verwendet werden.

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zum Erstellen und Verwenden eines erweiterten Timer-Beispielcodes in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!