SetTimeout JavaScript Fonction: Guide avec des exemples

Fonction de JavaScript setTimeout Explication: Implémentation de l'exécution retardée

setTimeout est une fonction native dans JavaScript qui est utilisée pour appeler des fonctions ou exécuter des extraits de code après un retard spécifié (millisecondes). Ceci est utile dans de nombreux scénarios, tels que l'affichage d'une fenêtre contextuelle après que l'utilisateur navigue sur la page pendant un certain temps, ou l'ajout d'un bref délai avant de supprimer l'effet d'élément de survol (empêcher la mauvaise opération).

Points clés:

• La fonction setTimeout de JavaScript permet l'exécution de fonctions ou d'extraits de code après un nombre spécifié de millisecondes, ce qui est très utile pour les tâches telles que l'affichage des popups après un certain temps de navigation.
• setTimeout accepte une référence de fonction comme premier paramètre, qui peut être un nom de fonction, une variable qui fait référence à la fonction ou à la fonction anonyme. Il peut également exécuter des chaînes de code, mais il n'est pas recommandé car cela réduira la lisibilité, la sécurité et la vitesse.
• Vous pouvez utiliser une fonction anonyme comme premier paramètre pour transmettre le paramètre à la fonction de rappel exécutée par setTimeout. Cependant, une alternative à la liste des paramètres après retard est incompatible avec IE9 et ci-dessous.
• Dans le code exécuté par setTimeout, la valeur de this s'exécute dans un contexte d'exécution différent de la fonction qui l'appelle, ce qui peut causer des problèmes lorsque le contexte du mot-clé this est important. Cela peut être résolu à l'aide de bind, de fonctions de bibliothèque ou de fonctions fléchées.
La valeur de retour de
• setTimeout est un ID numérique qui peut être utilisé pour annuler la minuterie en conjonction avec la fonction clearTimeout.

setTimeout Exemple d'utilisation

Le bloc de code suivant montre un exemple simple qui imprime le message à la console après un délai de 2 secondes (2000 millisecondes):

<code class="language-javascript">function greet() {
  console.log('Howdy!');
}
setTimeout(greet, 2000);</code>

Pour démontrer ce concept plus en détail, la démonstration suivante affiche une fenêtre contextuelle après avoir cliqué sur le bouton deux secondes: (veuillez visiter Codepen pour afficher la démo)

grammaire

Selon la documentation MDN, la syntaxe de setTimeout est la suivante:

<code class="language-javascript">const timeoutID = setTimeout(code);
const timeoutID = setTimeout(code, delay);

const timeoutID = setTimeout(functionRef);
const timeoutID = setTimeout(functionRef, delay);
const timeoutID = setTimeout(functionRef, delay[, arg1, arg2, /* … ,*/ argN])</code>

de:

• timeoutID est un ID numérique qui peut être utilisé en conjonction avec clearTimeout pour annuler la minuterie.
• scope fait référence à l'interface Window ou à l'interface WorkerGlobalScope.
• functionRef est la fonction à exécuter après l'expiration du temporisateur.
• code est une syntaxe alternative qui vous permet d'inclure des chaînes au lieu de fonctions compilées et exécutées lorsque le minuteur expire.
• delay est le nombre de millisecondes qu'un appel de fonction doit être retardé. S'il est omis, la valeur par défaut est 0.
• arg1, ..., argN sont d'autres paramètres transmis à la fonction spécifiée par functionRef.

Remarque: supports carrés [] Indiquer des paramètres facultatifs.

setTimeout et window.setTimeout

Vous remarquerez que parfois la syntaxe contient window.setTimeout. Pourquoi est-ce?

Lors de l'exécution du code dans un navigateur, scope se référera à l'objet global window. setTimeout et window.setTimeout se référer à la même fonction, la seule différence est que dans la deuxième instruction, nous appelons la méthode setTimeout comme la propriété de l'objet window.

À mon avis, cela ajoute de la complexité, tandis que les avantages sont minimes. Si vous définissez une autre méthode setTimeout qui sera trouvée en premier et retournée dans la chaîne de portée, vous pouvez avoir de plus gros problèmes à vous soucier.

Dans ce tutoriel, je vais omettre window, mais en fin de compte, c'est à vous de la syntaxe que vous choisissez.

setTimeout Exemple d'utilisation de la méthode

setTimeout La méthode accepte une référence de fonction comme premier paramètre.

Cela peut être le nom de la fonction:

<code class="language-javascript">function greet() {
  console.log('Howdy!');
}
setTimeout(greet, 2000);</code>

Variables qui de référence fonctionnent (expression de fonction):

<code class="language-javascript">const timeoutID = setTimeout(code);
const timeoutID = setTimeout(code, delay);

const timeoutID = setTimeout(functionRef);
const timeoutID = setTimeout(functionRef, delay);
const timeoutID = setTimeout(functionRef, delay[, arg1, arg2, /* … ,*/ argN])</code>

ou fonction anonyme:

<code class="language-javascript">function greet() {
  alert('Howdy!');
}
setTimeout(greet, 2000);</code>

Comme mentionné ci-dessus, vous pouvez également passer la chaîne de code à setTimeout pour son exécution:

<code class="language-javascript">const greet = function() {
  alert('Howdy!');
};
setTimeout(greet, 2000);</code>

Cependant, cela n'est pas recommandé pour les raisons suivantes:

• Difficile à lire (et donc difficile à maintenir et / ou à déboguer).
• Il utilise implicite eval, qui est un risque de sécurité potentiel.
• C'est plus lent que l'alternative car il doit appeler l'interprète JS.

passer des paramètres à setTimeout

Dans le scénario de base, la méthode de croisement préférée consiste à passer l'argument à la fonction de rappel exécutée par setTimeout en utilisant une fonction anonyme comme premier paramètre.

Dans l'exemple suivant, nous sélectionnons un animal aléatoire dans le tableau animals et passons cet animal aléatoire comme paramètre à la fonction makeTalk. Ensuite, setTimeout exécute la fonction makeTalk avec un retard d'une seconde:

<code class="language-javascript">setTimeout(() => { alert('Howdy!'); }, 2000);</code>

Remarque: J'ai utilisé une fonction régulière (getRandom) pour renvoyer un élément aléatoire du tableau. Vous pouvez également l'écrire comme une expression de fonction à l'aide de fonctions fléchées:

<code class="language-javascript">setTimeout('alert("Howdy!");', 2000);</code>

Nous présenterons la fonction de flèche dans la section suivante. Voici un codePen contenant le code ci-dessus (vous devez ouvrir la console pour afficher la sortie).

Méthode alternative

De la syntaxe en haut de l'article, on peut voir qu'il existe une deuxième méthode pour transmettre des paramètres à la fonction de rappel exécutée par setTimeout. Cela implique de répertorier tous les paramètres après le retard.

Reportez-vous à notre exemple précédent, cela nous donnera:

<code class="language-javascript">function makeTalk(animal) {
  const noises = {
    cat: 'purr',
    dog: 'woof',
    cow: 'moo',
    pig: 'oink',
  }

  console.log(`A ${animal} goes ${noises[animal]}.`);
}

function getRandom(arr) {
  return arr[Math.floor(Math.random() * arr.length)];
}

const animals = ['cat', 'dog', 'cow', 'pig'];
const randomAnimal = getRandom(animals);

setTimeout(() => {
  makeTalk(randomAnimal);
}, 1000);</code>

Malheureusement, cela ne fonctionne pas dans IE9 ou ci-dessous, où les paramètres sont passés comme undefined. Si vous avez malheureusement besoin de support pour IE9, un polyfill est fourni sur MDN.

this Questions de mots clés

setTimeout Le code exécuté s'exécute dans un contexte d'exécution différent de la fonction qui l'appelle. Cela devient un problème lorsque le contexte du mot-clé this est important:

<code class="language-javascript">function greet() {
  console.log('Howdy!');
}
setTimeout(greet, 2000);</code>

La raison de cette sortie est que dans le premier exemple,

pointe vers l'objet this, et dans le deuxième exemple, dog pointe vers l'objet global this (il n'a pas l'attribut window ). sound

Pour résoudre ce problème, il existe différentes manières ...

Réglage explicatif de la valeur de

this

Vous pouvez utiliser la méthode

pour créer une nouvelle fonction, et lorsqu'elle est appelée, son mot-clé bind sera défini sur la valeur fournie (dans ce cas, l'objet bind). Cela nous donnera: this dog

Bibliothèque d'utilisateurs

<code class="language-javascript">const timeoutID = setTimeout(code);
const timeoutID = setTimeout(code, delay);

const timeoutID = setTimeout(functionRef);
const timeoutID = setTimeout(functionRef, delay);
const timeoutID = setTimeout(functionRef, delay[, arg1, arg2, /* … ,*/ argN])</code>

De nombreuses bibliothèques sont livrées avec des fonctions intégrées pour résoudre ce problème. Par exemple, la méthode

de jQuery. Il accepte une fonction et renvoie une nouvelle fonction qui aura toujours un contexte spécifique. Dans ce cas, ce serait:

jQuery.proxy()

Utilisez la fonction de flèche dans

<code class="language-javascript">function greet() {
  alert('Howdy!');
}
setTimeout(greet, 2000);</code>

La fonction de flèche a été introduite dans ES6. Ils sont beaucoup plus courts que la syntaxe des fonctions régulières: setTimeout

Bien sûr, vous pouvez les utiliser avec

, mais une chose à noter - la fonction Arrow n'a pas sa propre valeur

<code class="language-javascript">const greet = function() {
  alert('Howdy!');
};
setTimeout(greet, 2000);</code>

. Au lieu de cela, ils utilisent la valeur

du contexte lexical fermé. setTimeout this Utilisez une fonction régulière: this

Utilisez la fonction de flèche:

<code class="language-javascript">setTimeout(() => { alert('Howdy!'); }, 2000);</code>

Dans le deuxième exemple,

pointe vers l'objet global

<code class="language-javascript">setTimeout('alert("Howdy!");', 2000);</code>

(encore une fois, il n'a pas de propriété

). this window Cela peut nous causer des ennuis lors de l'utilisation de la fonction de flèche avec sound. Nous avons déjà vu comment fournir la valeur

correcte pour la fonction appelée dans

: setTimeout setTimeout this Cela ne fonctionnera pas lors de l'utilisation de la fonction de flèche dans la méthode introduite, car la fonction de flèche n'a pas sa propre valeur

. Cette méthode enregistrera toujours

<code class="language-javascript">function makeTalk(animal) {
  const noises = {
    cat: 'purr',
    dog: 'woof',
    cow: 'moo',
    pig: 'oink',
  }

  console.log(`A ${animal} goes ${noises[animal]}.`);
}

function getRandom(arr) {
  return arr[Math.floor(Math.random() * arr.length)];
}

const animals = ['cat', 'dog', 'cow', 'pig'];
const randomAnimal = getRandom(animals);

setTimeout(() => {
  makeTalk(randomAnimal);
}, 1000);</code>

.

this Écriture du code de nettoyant à l'aide des fonctions fléchées et undefined

Cependant, parce que la fonction de flèche n'a pas sa propre valeur

, elle peut également nous donner un avantage. setTimeout

Considérons le code comme ceci:

this

Il peut être réécrit de manière plus concise en utilisant la fonction flèche:

<code class="language-javascript">const getRandom = arr => arr[Math.floor(Math.random() * arr.length)];</code>

Si vous voulez connaître le début des fonctions Arrow, lisez "ES6 FERNE FONCTIONS: Syntaxe concise en javascript".

Annuler la minuterie

<code class="language-javascript">setTimeout(makeTalk, 1000, randomAnimal);</code>

Comme nous l'avons appris au début de l'article, la valeur de retour de

est un ID numérique qui peut être utilisé en conjonction avec la fonction

pour annuler la minuterie:

<code class="language-javascript">function greet() {
  console.log('Howdy!');
}
setTimeout(greet, 2000);</code>

Voyons comment cela fonctionne réellement. Dans le stylo ci-dessous, si vous cliquez sur le bouton Démarrer le compte à rebours, le compte à rebours commencera. Si le compte à rebours est terminé, le chaton gagne. Cependant, si vous appuyez sur le bouton "Stop Countdown", la minuterie sera arrêtée et réinitialisée. (Si vous ne voyez pas un effet cool lorsque le compte à rebours atteint zéro, relâchez le stylo en utilisant le bouton intégré sur le côté droit du bas.)

Résumé

Dans cet article, je montre comment utiliser setTimeout pour retarder l'exécution d'une fonction. J'ai également montré comment transmettre des paramètres à setTimeout, comment maintenir la valeur this dans sa fonction de rappel et comment annuler la minuterie.

setTimeout FAQS pour les fonctions JavaScript

• setTimeout Qu'y a-t-il dans JavaScript?

  setTimeout est une fonction intégrée dans JavaScript qui vous permet de planifier l'exécution d'un segment de fonction ou de code après un retard spécifié (en millisecondes).

• setTimeout Comment ça marche?

  Lorsque vous appelez la fonction setTimeout, vous devez fournir deux paramètres: la fonction ou le code à exécuter et le retard en millisecondes. Les fonctions / code fournies seront ajoutés à la file d'attente et après le retard spécifié, il sera déplacé de la file d'attente à la pile d'appels pour exécution.

• Quelles sont les alternatives à l'utilisation setTimeout?

  Oui, il existe des alternatives, telles que setInterval, qui répéteront la fonction à des intervalles spécifiés, et le plus récent requestAnimationFrame, qui est pour des animations plus lisses et de meilleures performances de navigateur.

• Quand ne devrait pas être utilisé setTimeout?

  setTimeout est un outil utile pour planifier l'exécution de code asynchrone en JavaScript, mais dans certains cas, ce n'est peut-être pas le meilleur choix. Pour des animations ou des jeux précis, vous devez utiliser requestAnimationFrame. Vous ne devriez pas nicher plusieurs appels setTimeout; setTimeout inexact pour les retards inférieurs à 10 millisecondes; Si vous créez une application en temps réel (telles que les jeux multijoueurs en ligne ou les plateformes de trading financier), choisissez des technologies en temps réel telles que WebSockets. Les grandes tâches à forte intensité de CPU peuvent bloquer les boucles d'événements; utiliser des travailleurs Web si nécessaire.

• Puis-je annuler l'opération setTimeout?

  Oui, vous pouvez utiliser la fonction clearTimeout pour annuler le délai d'attente planifié. Il prend l'ID de délai de temps renvoyé par setTimeout en tant que paramètre. Par exemple: const timeoutId = setTimeout(myFunction, 1000); clearTimeout(timeoutId);

• Quelle est la différence entre

  setTimeout et setInterval?

  setTimeout Planifiez la fonction à exécuter une fois après le retard spécifié, tandis que setInterval Planifiez la fonction pour exécuter à plusieurs reprises à l'intervalle spécifié jusqu'à ce qu'elle soit annulée ou que le programme s'arrête.

• Quelle est la valeur de retard minimum que je peux utiliser setTimeout?

  La valeur de retard minimum est 0, ce qui signifie que la fonction doit être exécutée avant la fin du thread actuel mais gère les événements en attente. Cependant, la granularité réelle de la minuterie varie du navigateur à un navigateur et un environnement à différents navigateurs. Certains environnements peuvent ne pas prendre en charge les retards de moins de 10 millisecondes.

• setTimeout Qu'y a-t-il dans Node.js?

  setTimeout est une fonction intégrée pour node.js qui retarde l'exécution d'une fonction ou d'un bloc de code donné par nombre spécifié de millisecondes.

• Comment utiliser setTimeout dans Node.js?

  Vous pouvez utiliser la fonction setTimeout comme suit: setTimeout(callback, delay); où callback est la fonction que vous souhaitez exécuter après le retard de milliseconde spécifié.

• Quelles sont les meilleures pratiques pour utiliser setTimeout dans node.js?

  Certaines meilleures pratiques incluent l'utilisation des fonctions nommées comme rappels, la gestion des erreurs gracieusement et la compréhension du comportement des boucles d'événements pour éviter les retards ou les blocages inattendus. Envisagez également d'utiliser setImmediate pour exécuter immédiatement au cours du prochain cycle de boucle d'événements.

(Notez que parce que le texte d'entrée contient un lien vers Codepen, je ne peux pas rendre le contenu de Codepen directement dans la sortie. Vous devez visiter le lien fourni dans l'article pour afficher la démo de codepen.)

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!