setTimeout ()
La méthode setTimeout () est utilisée pour spécifier qu'une fonction ou une chaîne est exécutée après le nombre spécifié de millisecondes. Il renvoie un entier représentant le numéro de la minuterie, qui peut être transmis à ClearTimeout () pour annuler l'exécution de cette fonction
Dans le code suivant, la console sortira 0 d'abord, après environ 1000 ms, c'est-à-dire 1s, la valeur de retour de la méthode Timer Settimeout () est sortie.
var timer = setTimeout (function () {console.log (timer);}, 1000); console.log (0);Il peut également être écrit sous forme de paramètres de chaîne. Étant donné que ce formulaire entraînera l'analyse du moteur JavaScript deux fois, réduisant les performances, il n'est pas recommandé de l'utiliser.
var timer = setTimeout ('console.log (temporisateur);', 1000); console.log (0);Si le deuxième paramètre de setTimeout est omis, le paramètre par défaut est 0
Dans le code suivant, 0 et 1 apparaissent sur la console, mais 0 est devant, et cette question sera expliquée plus tard.
var timer = setTimeout (function () {console.log (timer);}); console.log (0);En fait, en plus des deux premiers paramètres, la méthode setTimeout () permet également d'ajouter plus de paramètres, qui seront transmis dans la fonction dans la minuterie.
Dans le code suivant, la console sortira 2 après environ 1000 ms, c'est-à-dire 1s. Cependant, le Browser IE9 permet uniquement à Settimeout d'avoir deux paramètres et ne prend pas en charge plus de paramètres. Nan sera sorti sur la console.
setTimeout (fonction (a, b) {console.log (a + b);}, 1000,1,1);Vous pouvez utiliser le transfert de paramètres iife pour être compatible avec le transfert de paramètre de la fonction IE9-Browser
setTimeout ((fonction (a, b) {return function () {console.log (a + b);}}) (1,1), 1000);Ou écrivez la fonction à l'extérieur du minuteur, puis la fonction est appelée avec des paramètres dans la fonction anonyme dans la minuterie.
Fonction Test (a, b) {console.log (a + b);} setTimeout (function () {test (1,1);}, 1000);Cela pointe vers
Les quatre règles contraignantes indiquées par ce mécanisme ont été introduites en détail dans cette série. Étant donné que cela dans la minuterie est implicitement perdu et est très sujet aux erreurs, il sera à nouveau expliqué ici.
var a = 0; fonction foo () {console.log (this.a);}; var obj = {a: 2, foo: foo} setTimeout (obj.foo, 100); // 0 // équivalent à var a = 0; setTimeout (fonction foo () {console.log (this.a);}, 100); // 0Si vous souhaitez obtenir la valeur de propriété A dans l'objet OBJ, vous pouvez placer la fonction obj.foo dans une fonction anonyme dans le minuteur pour la liaison implicite.
var a = 0; fonction foo () {console.log (this.a);}; var obj = {a: 2, foo: foo} setTimeout (function () {obj.foo ();}, 100); // 2Ou vous pouvez utiliser la méthode de liaison pour lier celle de la méthode foo () à obj
var a = 0; fonction foo () {console.log (this.a);}; var obj = {a: 2, foo: foo} setTimeout (obj.foo.bind (obj), 100); // 2ClearTimeout ()
La fonction SetTimeout Renvoie une valeur entière représentant le numéro de compteur, transmet l'intégralité dans la fonction ClearTimeout, annulant la minuterie correspondante
// Après 100 ms, la console sortira la valeur de retour de la méthode setTimeout () 1Var Timer = setTimeout (function () {console.log (timer);}, 100);Par conséquent, cette valeur peut être utilisée pour annuler la minuterie correspondante
var timer = setTimeout (function () {console.log (timer);}, 100); ClearTimeout (temporisateur);Ou utilisez la valeur de retour directement comme paramètre
var timer = setTimeout (function () {console.log (timer);}, 100); ClearTimeout (1);D'une manière générale, la valeur entière renvoyée par setTimeout est continue, c'est-à-dire que la valeur entière renvoyée par la deuxième méthode Settimeout est 1 supérieure à la première valeur entière.
// sortie de la console 1, 2, 3Var TIMER1 = setTimeout (function () {console.log (timer1);}, 100); var timer2 = setTimeout (function () {console.log (timer2);}, 100); var timer3 = setTimeout (function () {console.log (timer3);}, 100);setInterval ()
L'utilisation de SetInterval est exactement la même que Settimeout. La seule différence est que SetInterval spécifie qu'une tâche est exécutée de temps en temps, c'est-à-dire une exécution chronométrée illimitée
<Button id = "btn"> 0 </ bouton> <script> var timer = setInterval (function () {btn.innerhtml = nombre (btn.innerhtml) + 1;}, 1000); btn.onclick = function () {ClearInterval (timiner); btn.innerhtml = 0;} </ script>[Remarque] La norme HTML5 stipule que l'intervalle de temps le plus court de Settimeout est de 4 millisecondes; L'intervalle le plus court de SetInterval est de 10 millisecondes, c'est-à-dire que l'intervalle de temps inférieur à 10 millisecondes sera ajusté à 10 millisecondes
La fréquence de rafraîchissement de la plupart des moniteurs informatiques est de 60 Hz, ce qui équivaut à peu près à la repection de 60 fois par seconde. Par conséquent, l'intervalle de boucle optimal pour l'effet d'animation le plus lisse est de 1000 ms / 60, ce qui est approximativement égal à 16,6 ms
Pour économiser de l'énergie, le navigateur étend l'intervalle de temps à 1000 millisecondes pour des pages qui ne sont pas dans la fenêtre actuelle. De plus, si l'ordinateur portable est alimenté par batterie, Chrome et IE 9 ou plus commuteront l'intervalle de temps à la minuterie du système, qui est d'environ 16,6 millisecondes
Mécanisme de fonctionnement
Expliquons la partie précédente de la question, pourquoi 0 apparaît-il devant 1 dans le résultat de la console du code ci-dessous?
setTimeout (function () {console.log (1);}); console.log (0);En fait, la définition du deuxième paramètre de Settimeout sur 0S ne signifie pas exécuter immédiatement la fonction, mais simplement mettre la fonction dans la file d'attente de code.
Dans l'exemple suivant, un gestionnaire d'événements est défini sur un bouton BTN. Le gestionnaire d'événements définit une minuterie à appeler après 250 ms. Après avoir cliqué sur ce bouton, ajoutez d'abord le gestionnaire d'événements OnClick à la file d'attente. La minuterie est définie après l'exécution du programme. Après 250 ms, le code spécifié est ajouté à la file d'attente et attendez l'exécution.
btn.onclick = function () {setTimeout (function () {console.log (1);}, 250);}Si le gestionnaire d'événements ONClick dans le code ci-dessus a été exécuté pendant 300 ms, le code de la minuterie doit être exécuté au moins 300 ms après le défilé du minuteur. Tout le code dans la file d'attente doit attendre que le processus JavaScript soit inactif, quelle que soit la façon dont ils sont ajoutés à la file d'attente.
Comme le montre la figure, bien que le code de la minuterie ait été ajouté à 255 ms, il ne peut pas être exécuté à ce moment car le gestionnaire d'événements OnClick est toujours en cours d'exécution. Le premier code de minuterie peut être exécuté est à 300 ms, c'est-à-dire une fois le gestionnaire d'événements OnClick
SetInterval Problem
Le problème avec l'utilisation de setInterval () est que le code de la minuterie n'a peut-être pas été exécuté avant que le code ne soit à nouveau ajouté à la file d'attente, ce qui entraîne le code de minuterie en cours d'exécution plusieurs fois de suite sans aucune pause entre eux. La solution à ce problème par le moteur JavaScript est d'ajouter le code de la minuterie à la file d'attente lors de l'utilisation de setInterval (). Cela garantit que l'intervalle de temps minimum pour le code de la minuterie à ajouter à la file d'attente est l'intervalle spécifié
Cependant, cela peut entraîner deux problèmes: 1. Certains intervalles sont ignorés; 2. L'intervalle entre l'exécution du code de plusieurs minuteries peut être plus petit que prévu
Supposons qu'un certain gestionnaire d'événements ONClick définisse un temporisateur d'intervalle de 200 ms à l'aide de Serinterval (). Si le gestionnaire d'événements prend plus de 300 ms à terminer et que le code de la minuterie prend également à peu près au même moment, un certain intervalle sera ignoré en même temps.
Le premier temporisateur de l'exemple est ajouté à la file d'attente à 205 ms, mais ne peut pas être exécuté avant 300 ms. Lorsque ce code de minuterie est exécuté, une autre copie est ajoutée à la file d'attente à 405 ms. À l'intervalle suivant, 605 ms, le premier code de minuterie est toujours en cours d'exécution, et il y a déjà une instance du code de minuterie dans la file d'attente. En conséquence, le code de la minuterie à ce stade ne sera pas ajouté à la file d'attente
Itérer settimeout
Pour éviter le problème de la minuterie setInterval (), vous pouvez utiliser l'appel SetTimeout () enchaîné
setTimeout (fonction fn () {setTimeout (fn, interval);}, interval);Cette chaîne de modèle appelle setTimeout (), et un nouveau minuteur est créé chaque fois que la fonction est exécutée. Le deuxième setTimeout () appelle la fonction actuellement exécutée et définit un autre temporisateur. L'avantage de cela est que le nouveau code de minuterie n'est pas inséré dans la file d'attente jusqu'à ce que le code de temporisation précédent soit exécuté, garantissant qu'il n'y a pas d'intervalles manquants. De plus, il garantit qu'avant l'exécution du code de minuterie suivant, au moins l'intervalle spécifié doit être attendu, en évitant le fonctionnement continu.
Utiliser setInterval ()
<div id = "myDiv" style = "height: 100px; width: 100px; background-color: rose; position: absolu; gauche: 0;"> </div> <cript> mydiv.onclick = function () {var timer = setInterval (function () {ClearInterval (TIMER); false;} mydiv.style.left = parseInt (mydiv.style.left) + 5 + 'px'; } </ script>Utiliser SetTimeout () enchaîné
<div id = "myDiv" style = "hauteur: 100px; width: 100px; background-color: rose; position: Absolute; Left: 0;"> </div> <script> mydiv.onclick = function () {settimeout (function fn () {Settimeout (fn, 16); false;} mydiv.style.left = parseInt (mydiv.style.left) + 5 + 'px'; } </ script>application
Utilisez des minuteries pour ajuster la séquence des événements
[1] Dans le développement Web, un événement se produit d'abord dans l'élément enfant, puis bouillonne jusqu'à l'élément parent, c'est-à-dire que la fonction de rappel d'événement de l'élément enfant sera déclenchée plus tôt que la fonction de rappel d'événement de l'élément parent. Si nous laissons d'abord la fonction de rappel des événements de l'élément parent se produire en premier, nous devons utiliser SetTimeout (F, 0)
Dans des circonstances normales, cliquez sur l'élément div, apparaissez d'abord 0, puis apparaissez 1
<div id = "myDiv" style = "height: 100px; width: 100px; background-color: rose;"> </div> <script> myDiv.OnClick = function () {alert (0);} document.onclick = function () {alert (1);} </cript>Si vous voulez que l'événement OnClick du document se produise en premier, c'est-à-dire cliquez sur l'élément div, 1 apparaîtra en premier, puis 0 apparaîtra. Ensuite, faites les paramètres suivants
<div id = "myDiv" style = "height: 100px; width: 100px; background-color: rose;"> </div> <script> mydiv.onclick = function () {setTimeout (function () {alert (0);})} document.onclick = function () {alert (1);} </cript>【2】 Fonction de rappel définie par l'utilisateur, généralement déclenchée avant l'action par défaut du navigateur. Par exemple, si un utilisateur entre dans le texte dans la zone de saisie, l'événement de pression de la touche sera déclenché avant que le navigateur ne reçoive le texte. Par conséquent, la fonction de rappel suivante ne peut pas atteindre son objectif
<input type = "text" id = "myInput"> <cript> myInput.OnkeyPress = function (event) {this.value = this.value.touppercase ();} </cript>Le code ci-dessus veut convertir les caractères en capitalisation immédiatement après que l'utilisateur entre dans le texte. Mais en fait, il ne peut convertir le caractère précédent qu'en capitalisation, car le navigateur n'a pas reçu le texte pour le moment, donc cette valeur ne peut pas obtenir le dernier caractère d'entrée.
Ce n'est qu'en le réécrivant avec Settimeout que le code ci-dessus peut fonctionner
<input type = "text" id = "myInput"> <cript> myInput.onKeyPress = function (event) {setTimeout (function () {myInput.value = myInput.value.toupperase ();});} </ script>Le code se termine ici. Le prochain article vous le présentera
Bom Series: DemandeAmationframe
La troisième application de temporisation de la série BOM (horloge, compte à rebours, chronomètre et réveil)
Ce qui précède est le premier temporisateur setTimeout et SetInterval de la série BOM qui vous est présenté par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!