Die setTimeout-Zeit wird für die detaillierte Analyse auf 0 gesetzt

setTimeout() ist eine Methode, die zu window gehört, aber wir alle lassen den Containernamen der obersten Ebene weg. Dies wird zum Festlegen einer Zeit verwendet. Wenn die Zeit abgelaufen ist, wird der folgende Artikel ausgeführt hauptsächlich erklärt Wir haben relevante Informationen zum Setzen der setTimeout-Zeit auf 0 eingeführt. Freunde in Not können sich darauf beziehen.

Vorwort

Dieser Artikel stellt Ihnen hauptsächlich den relevanten Inhalt zum Festlegen der setTimeout-Zeit auf 0 vor und stellt ihn für Ihre Referenz und Ihr Studium zur Verfügung . Zu den folgenden Worten gibt es nicht viel mehr zu sagen, werfen wir einen Blick auf die ausführliche Einleitung.

1. Vorspeise, was ist setTimeout

Werfen wir zunächst einen Blick auf die Erklärung von setTimeout auf w3school

Die Methode setTimeout(fn,millisec) wird verwendet, um eine Funktion oder einen berechneten Ausdruck nach einer angegebenen Anzahl von Millisekunden aufzurufen.

Es ist ganz einfach setTimeout() Führen Sie fn nur einmal aus. Wann es ausgeführt wird, hängt von der Anzahl der Millisekunden ab, die durch den zweiten Parameter Millisekunden festgelegt werden, daher sind viele Leute daran gewöhnt, es Verzögerung zu nennen, was nichts anderes ist als eine Verzögerung von einem bestimmten Zeitraum. Führen Sie dann den darin enthaltenen Code aus.

setTimeout(function(){
 console.log('我是setTimeout');
}, 1000);

Unter normalen Umständen wird dieser Satz nicht sofort, sondern nach 1000 Millisekunden in der Browserkonsole ausgegeben.

2. Hauptgericht, js ist Single-Threaded

OK, schauen wir uns ein Beispiel an dieses Beispiel?

setTimeout(function(){
 console.log(1);
}, 0);
console.log(2);
console.log(3);

Zur Überraschung einiger Leute waren die Ergebnisse 2, 3, 1. Dies scheint der Routine nicht zu folgen. Es wartet offensichtlich 0 Millisekunden, das heißt, es wird direkt ausgegeben, ohne zu warten. Warum wird am Ende 1 ausgegeben?

Dies erfordert die Klärung eines sehr wichtigen Konzepts: js ist Single-Threading. Single-Threading bedeutet, dass alle Aufgaben in die Warteschlange gestellt werden müssen und die nächste Aufgabe erst ausgeführt wird, wenn die vorherige Aufgabe abgeschlossen ist. Wenn die vorherige Aufgabe lange dauert, muss die nächste Aufgabe warten.

Tatsächlich ist es leicht zu verstehen. So wie jeder zum Einkaufen in den Supermarkt geht, muss sich jeder, der etwas kauft, an der Kasse anstellen Bedienen Sie jeweils nur eine Person. Erst nachdem dieser Kunde ausgecheckt hat, kann der nächste Kunde bedient werden.

Der Kernel des Browsers arbeitet unter der Kontrolle des Kernels zusammen, um die Synchronisierung aufrechtzuerhalten. Ein Browser implementiert mindestens drei residente Threads: Javascript-Engine-Thread, GUI-Rendering-Thread und Browser-Ereignisse Trigger-Thread.

• Die JavaScript-Engine basiert auf der ereignisgesteuerten Single-Thread-Ausführung. Die JS-Engine hat auf das Eintreffen von Aufgaben in der Aufgabenwarteschlange gewartet und diese dann nur vom Browser verarbeitet Es kann jederzeit ein JS-Thread ausgeführt werden.
  

• Der GUI-Rendering-Thread ist für das Rendern der Browseroberfläche verantwortlich. Wenn die Schnittstelle neu gezeichnet werden muss (Repaint) oder ein Reflow durch einen Vorgang verursacht wird, wird dies der Fall sein hingerichtet. Es ist jedoch zu beachten, dass sich der GUI-Rendering-Thread und die JS-Engine gegenseitig ausschließen. Wenn die JS-Engine ausgeführt wird, wird der GUI-Thread angehalten und GUI-Updates werden in einer Warteschlange gespeichert und sofort ausgeführt, wenn die JS-Engine ausgeführt wird Leerlauf.
  

• Ereignisauslöser-Thread Wenn ein Ereignis ausgelöst wird, fügt der Thread das Ereignis am Ende der ausstehenden Warteschlange hinzu und wartet auf die Verarbeitung durch die JS-Engine. Diese Ereignisse können aus dem Codeblock stammen, der derzeit von der JavaScript-Engine ausgeführt wird, z. B. setTimeOut, oder aus anderen Threads im Browserkernel, z. B. Mausklicks, asynchronen AJAX-Anforderungen usw. Aufgrund der Single-Thread-Beziehung von JS jedoch alle Diese Ereignisse müssen zur Verarbeitung durch die JS-Engine in die Warteschlange gestellt werden. (Asynchroner Code wird ausgeführt, wenn im Thread kein synchroner Code ausgeführt wird.)
  

Wenn die Ausführung des js-Codes tatsächlich auf setTimeout(fn,millisec) trifft, ist die Funktion fn wird in die Aufgabenwarteschlange gestellt. Wenn der JS-Engine-Thread inaktiv ist und die durch Millisekunden angegebene Zeit erreicht, wird fn zur Ausführung in den JS-Engine-Thread gestellt.

setTimeout(fn,0) bedeutet, eine Aufgabe anzugeben, die in der frühesten verfügbaren Leerlaufzeit des Hauptthreads ausgeführt werden soll, dh so früh wie möglich ausgeführt werden soll. Es fügt am Ende der „Aufgabenwarteschlange“ ein Ereignis hinzu, sodass es erst ausgeführt wird, wenn die Synchronisierungsaufgabe und die vorhandenen Ereignisse in der „Aufgabenwarteschlange“ verarbeitet wurden.

Der HTML5-Standard schreibt vor, dass der Mindestwert (kürzestes Intervall) des zweiten Parameters von setTimeout() nicht weniger als 4 Millisekunden betragen darf. Wenn er niedriger als dieser Wert ist, wird er automatisch erhöht. Zuvor haben ältere Browser das Mindestintervall auf 10 Millisekunden festgelegt. Darüber hinaus werden diese DOM-Änderungen (insbesondere solche, die das erneute Rendern von Seiten beinhalten) normalerweise nicht sofort, sondern alle 16 Millisekunden ausgeführt. Zu diesem Zeitpunkt ist die Wirkung von requestAnimationFrame() besser als setTimeout() .

Es ist zu beachten, dass setTimeout() das Ereignis nur in die „Aufgabenwarteschlange“ einfügt und der Hauptthread die von ihm angegebene Rückruffunktion erst dann ausführt, wenn der aktuelle Code (Ausführungsstapel) abgeschlossen ist. Wenn der aktuelle Code lange dauert, kann es lange dauern, sodass nicht garantiert werden kann, dass die Rückruffunktion zu dem durch setTimeout() angegebenen Zeitpunkt ausgeführt wird.

3. Dessert, die wunderbare Verwendung von setTimeout

其实setTimeout是有一些妙用的，这里简单列举几个。

函数去抖

让一个函数在一定间隔内没有被调用时，才开始执行被调用方法。比如当你在使用 google 搜索内容的时候，有些关键词输入到一半，谷歌会展示一个可选列表，根据你当前输入的内容作出的一个猜测联想。需要监听文字改变，每一次改变都会调用一次回调函数，现在需要的一种实现是在用户停止键盘事件一段时间后，去发送一个请求。

var debounce = function(method, context) {
 clearTimeout(method.tId);
 method.tId = setTimeout(function(){
  method.call(context);
 },100);
}

轮训任务

js中可以使用setInterval开启轮询，但是这种存在一个问题就是执行间隔往往就不是你希望的间隔时间。

比如有个轮询任务间隔是100ms，但是执行方法的时间需要450ms，那么在200ms、300ms、400ms本来是计划中执行任务的时间，浏览器发现第一个还未执行完，那么就会放弃2、3、4次的任务执行，并且在500ms之后再次执行任务，这样的话，其实再次执行的间隔就只有50ms。使用setTimeout构造轮询能保证每次轮询的间隔。

setTimeout(function () {
 console.log('我被调用了');
 setTimeout(arguments.callee, 100);
}, 100);

延迟js引擎的调用

var p = document.createElement('p');
p.innerHTML = '我是一个p';
p.setAttribute('style', 'width:200px; height:200px;background-color:#f00; ');
document.body.appendChild(p);
setTimeout(function() {
 console.log('我被调用了');
}, 1000);

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

jQuery替换节点元素的操作方法

Vue中computed与methods的区别详解

javaScript实现鼠标在文字上悬浮时弹出悬浮层效果

Das obige ist der detaillierte Inhalt vonDie setTimeout-Zeit wird für die detaillierte Analyse auf 0 gesetzt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!