Maison > interface Web > Questions et réponses frontales > utilisation de javascript settimeout

utilisation de javascript settimeout

王林
Libérer: 2023-05-17 16:14:08
original
1010 Les gens l'ont consulté

setTimeout() en JavaScript est une fonction très utile qui vous permet d'exécuter certains codes après un certain temps. Cette méthode reçoit deux paramètres : le code à exécuter et le temps en millisecondes. Après le temps spécifié, le code exécuté sera appelé.

La méthode setTimeout() est souvent utilisée pour créer des effets de retard ou effectuer des actions spécifiques après une heure spécifique. Vous pouvez exécuter n'importe quel code JavaScript après une durée spécifiée, depuis de simples fenêtres d'alerte et messages contextuels jusqu'à l'exécution de fonctions ou d'opérations complexes.

Maintenant, nous allons en apprendre davantage sur l'utilisation de setTimeout.

Exécution retardée du code

L'exécution retardée du code est l'une des utilisations les plus élémentaires de setTimeout. Voici un exemple de base :

setTimeout(function(){
    alert("Hello World!");
}, 3000);
Copier après la connexion

Le code ci-dessus fera apparaître la boîte de message "Hello World!" après que l'utilisateur aura attendu 3 secondes.

Dans le code, le premier paramètre est une fonction anonyme car nous devons exécuter le code au lieu d'appeler directement la fonction. Le deuxième paramètre spécifie le temps de retard, ici en millisecondes. Dans cet exemple, nous spécifions 3 secondes (3 000 millisecondes) comme durée.

Manipuler les éléments DOM

setTimeout() peut également être utilisé pour manipuler des éléments DOM. Par exemple, le code suivant modifiera le contenu de l'élément de titre de la page après un certain temps :

let pageTitle = document.getElementById("page-title");
setTimeout(function(){
    pageTitle.textContent = "New Page Title";
}, 5000);
Copier après la connexion

Dans cet exemple, nous obtenons d'abord un élément de page avec l'identifiant "page-title" et le stockons dans une variable. Nous avons ensuite utilisé setTimeout() pour modifier la propriété textContent de l'élément, en changeant le titre de la page en "Nouveau titre de page". Dans cet exemple, nous avons utilisé un délai de 5 secondes.

Annuler setTimeout()

Dans certains cas, vous devrez peut-être annuler l'exécution de la fonction setTimeout() avant la fin du minuteur. Afin d'annuler le timer, vous pouvez utiliser la fonction clearTimeout(). Par exemple, le code suivant créera une minuterie dans un appel à la fonction setTimeout() comme premier argument. Au bout de 5 secondes, si l'utilisateur clique sur un élément, le timer sera annulé.

let timer = setTimeout(function(){
    alert("You've waited too long!");
}, 5000);

document.getElementById("some-element").addEventListener("click", function(){
    clearTimeout(timer);
});
Copier après la connexion

Dans cet exemple, nous stockons d'abord le numéro d'identification du minuteur afin de pouvoir l'annuler ultérieurement à l'aide de la fonction clearTimeout(). Nous utilisons ensuite la fonction addEventListener() pour associer le code qui efface le minuteur au clic de l'utilisateur sur un élément de la page. En utilisant cette approche, vous pouvez annuler une opération retardée lorsqu'une certaine condition est atteinte.

Conclusion

setTimeout() est une fonction très utile pour exécuter du code après un délai. Il peut être utilisé à diverses fins, notamment l'affichage de fenêtres d'alerte, la manipulation d'éléments DOM, l'ajout d'effets de retard et l'exécution de fonctions complexes. Dans tous les cas, vous pouvez utiliser la fonction clearTimeout() pour annuler le timer et empêcher l'exécution de l'opération.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal