Wie setTimeout die Zeit auf 0 setzt

Dieser Artikel führt Sie hauptsächlich in den relevanten Inhalt zum Festlegen der setTimeout-Zeit auf 0 ein. setTimeout () ist eine Methode, die zu window gehört, aber wir alle lassen den Containernamen der obersten Ebene weg, der zum Festlegen einer Zeit verwendet wird . Wenn es ankommt, wird eine bestimmte Methode ausgeführt. Der folgende Artikel führt Sie hauptsächlich in die relevanten Informationen zum Festlegen der setTimeout-Zeit auf 0 ein. Freunde in Not können sich darauf beziehen.

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ührt 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 . Es ist nichts anderes als eine gewisse Zeitspanne zu verzögern, bevor der darin enthaltene Code ausgeführt wird.

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. Der Kunde checkt aus. 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 auslösen.

• 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 der fn die Funktion 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. Der Hauptthread führt die von ihm angegebene Rückruffunktion erst aus, 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 wunderbaren Einsatzmöglichkeiten von setTimeout

Tatsächlich hat setTimeout einige wunderbare Einsatzmöglichkeiten, hier sind einige.

Funktionsentprellung

让一个函数在一定间隔内没有被调用时，才开始执行被调用方法。比如当你在使用 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);

虽然setTimeout有一些妙用，但是他确实是在宏观任务队列中新增任务了，所以万万不能滥用啊。

相关推荐：

JS中setInterval和setTimeout实例分析

JavaScript中setTimeout()的使用详解

javascript函数setTimeout带参数用法实例详解

Das obige ist der detaillierte Inhalt vonWie setTimeout die Zeit auf 0 setzt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!