Comment setTimeout définit l'heure sur 0

Cet article vous présente principalement le contenu pertinent sur la définition de l'heure setTimeout sur 0. setTimeout() est une méthode appartenant à window, mais nous omettons tous le nom du conteneur de niveau supérieur de window. Ceci est utilisé pour définir une heure. . Lorsqu'il arrivera, une méthode spécifiée sera exécutée. L'article suivant vous présente principalement les informations pertinentes sur la définition du délai setTimeout sur 0. Les amis dans le besoin peuvent s'y référer.

1. Apéritif, qu'est-ce que setTimeout

Tout d'abord, jetons un coup d'œil à l'explication de setTimeout sur w3school

La méthode setTimeout(fn,millisec) est utilisée pour appeler une fonction ou une expression calculée après un nombre spécifié de millisecondes.

C'est très simple. setTimeout() n'exécute fn qu'une seule fois. Le moment de son exécution dépend du nombre de millisecondes défini par le deuxième paramètre millisec, c'est pourquoi beaucoup de gens ont l'habitude de l'appeler retard. . Ce n'est rien de plus que de retarder un certain temps avant d'exécuter le code à l'intérieur.

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

Dans des circonstances normales, je suis setTimeout. Cette phrase ne sera pas affichée immédiatement mais sera affichée dans la console du navigateur après 1000 millisecondes.

2. Plat principal, js est monothread

OK, regardons un exemple. cet exemple ?

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

À la surprise de certains, les résultats étaient de 2, 3, 1. Cela ne semble pas suivre la routine. Il attend évidemment 0 milliseconde, c'est-à-dire qu'il sort directement sans attendre. Pourquoi 1 sortie à la fin ?

Cela nécessite de clarifier un concept très important : js est mono-threading signifie que toutes les tâches doivent être mises en file d'attente et la tâche suivante ne sera exécutée que lorsque la tâche précédente sera terminée. Si la tâche précédente prend beaucoup de temps, la tâche suivante devra attendre.

En fait, c'est facile à comprendre. Tout comme tout le monde va au supermarché pour acheter des choses, tous ceux qui achètent des choses doivent faire la queue à la caisse. Dans des circonstances normales, chaque caisse ne peut que le faire. servir une personne à la fois. Le client quitte le service. Ce n'est qu'après le départ de ce client que le client suivant peut être servi.

Le noyau du navigateur est multi-thread. Ils coopèrent entre eux sous le contrôle du noyau pour maintenir la synchronisation. Un navigateur implémente au moins trois threads résidents : le thread du moteur javascript, le thread de rendu de l'interface graphique, les événements du navigateur. Fil de déclenchement.

• Le moteur JavaScript est basé sur une exécution monothread basée sur des événements. Le moteur JS attend l'arrivée des tâches dans la file d'attente des tâches et les traite ensuite. un thread JS à tout moment.
  

• Le thread de rendu de l'interface graphique est responsable du rendu de l'interface du navigateur. Lorsque l'interface doit être repeinte (Repaint) ou qu'une redistribution est provoquée par une opération, ce fil le sera. exécuté. Cependant, il convient de noter que le thread de rendu GUI et le moteur JS s'excluent mutuellement lorsque le moteur JS est exécuté, le thread GUI sera suspendu et les mises à jour de l'interface graphique seront enregistrées dans une file d'attente et exécutées immédiatement lorsque le moteur JS sera exécuté. inactif.
  

• Fil de déclenchement d'événement Lorsqu'un événement est déclenché, le fil ajoute l'événement à la fin de la file d'attente en attente et attend son traitement par le moteur JS. Ces événements peuvent provenir du bloc de code actuellement exécuté par le moteur JavaScript tel que setTimeOut, ou d'autres threads du noyau du navigateur tels que des clics de souris, des requêtes asynchrones AJAX, etc. Cependant, en raison de la relation monothread de JS, tous ces événements doivent être mis en file d'attente pour être traités par le moteur JS. (Le code asynchrone sera exécuté lorsqu'aucun code synchrone n'est exécuté dans le thread)
  

En fait, lorsque l'exécution du code js rencontre setTimeout(fn,millisec), le fn sera La fonction est placé dans la file d'attente des tâches Lorsque le thread du moteur js est inactif et atteint le temps spécifié en millisecondes, fn sera placé dans le thread du moteur js pour l'exécution.

setTimeout(fn,0) signifie spécifier une tâche à exécuter dans le premier temps d'inactivité disponible du thread principal, c'est-à-dire à exécuter le plus tôt possible. Il ajoute un événement à la fin de la « file d'attente des tâches », il ne sera donc exécuté que lorsque la tâche de synchronisation et les événements existants dans la « file d'attente des tâches » auront été traités.

La norme HTML5 stipule que la valeur minimale (intervalle le plus court) du deuxième paramètre de setTimeout() ne doit pas être inférieure à 4 millisecondes. Si elle est inférieure à cette valeur, elle augmentera automatiquement. Avant cela, les anciens navigateurs fixaient l'intervalle minimum à 10 millisecondes. De plus, ces modifications du DOM (en particulier celles impliquant un nouveau rendu de page) ne sont généralement pas exécutées immédiatement, mais toutes les 16 millisecondes. À l'heure actuelle, l'effet de l'utilisation de requestAnimationFrame() est meilleur que celui de setTimeout() .

Il convient de noter que setTimeout() insère uniquement l'événement dans la "file d'attente des tâches". Le thread principal n'exécutera pas la fonction de rappel qu'il spécifie tant que le code actuel (pile d'exécution) n'est pas terminé. Si le code actuel prend beaucoup de temps, cela peut prendre beaucoup de temps, il n'y a donc aucun moyen de garantir que la fonction de rappel sera exécutée à l'heure spécifiée par setTimeout().

3. Dessert, les merveilleuses utilisations de setTimeout

En fait, setTimeout a de merveilleuses utilisations, en voici quelques-unes.

Fonction anti-rebond

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!