Detaillierte Erklärung der fortgeschrittenen Javascript-Timer_Javascript-Fähigkeiten

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 ob der Code zum genau angegebenen Zeitpunkt ausgeführt worden wäre. Es werden also einige Probleme auftreten.

Wiederholungstimer

Normalerweise verwenden wir die setInterval-Methode, um einen bestimmten Codeabschnitt wiederholt im gleichen Zeitintervall 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.
Nehmen wir hier ein Beispiel: Wenn ein Onclick-Ereignishandler setInterval verwendet, um einen sich wiederholenden Timer mit einem 200-ms-Intervall festzulegen und der Ereignishandler 300 ms für den Abschluss benötigt, überspringt er ein Zeitintervall und führt einen Timer-Code aus.
Wir können die Schlussfolgerung auch durch den folgenden Code erhalten:

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

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

Bei jeder Ausführung der Funktion wird ein neuer Timer erstellt. Der zweite setTimeout-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

Der Timer dient nicht nur der Zeitmessung, sondern kann 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.
Der Grundgedanke der Funktionsdrosselung besteht darin, dass bestimmter Code nicht kontinuierlich und wiederholt ohne Unterbrechung ausgeführt werden kann. 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 div = document.getElementByTagName(body);
 div.style.height = div.offsetWidth +'px';
}
//使用情况;
function resizeDiv(){
 var div = document.getElementByTagName(body);
 div.style.height = div.offsetWidth +'px';
}
window.onresize = function(){
 throttle(resizeDiv);
};
//只要代码是周期性执行的，都应该使用节流。

Das gibt dem Benutzer kein gutes Gefühl, aber es reduziert den Druck auf den Browser erheblich. Funktionsdrosselung ist auch eine der häufig verwendeten Techniken in vielen Frameworks.

Das Obige ist die relevante Einführung in den erweiterten JavaScript-Timer. Ich hoffe, dass es für das Lernen aller hilfreich sein wird.