Maison > interface Web > Questions et réponses frontales > Comment écrire du JavaScript après quelques secondes

Comment écrire du JavaScript après quelques secondes

WBOY
Libérer: 2023-05-21 11:36:37
original
2760 Les gens l'ont consulté

JavaScript est un langage de script largement utilisé dans les applications Web. Grâce à JavaScript, les développeurs peuvent ajouter des effets dynamiques, de l'interactivité et des comportements de page Web aux pages Web. Lors de l'écriture de programmes JavaScript, nous devons souvent exécuter certains codes après un certain temps, comme exécuter une fonction ou passer à une autre page après quelques secondes. Alors, comment JavaScript implémente-t-il cette fonction ?

1. Utilisez setTimeout()

La fonction setTimeout() est une méthode utilisée en JavaScript pour retarder l'exécution d'une certaine fonction. Cette fonction accepte deux paramètres : l'un est la fonction à exécuter et l'autre est le nombre de millisecondes à retarder. L'exemple de code est le suivant :

function func() {
  console.log("执行函数");
}

setTimeout(func, 3000); // 延迟3秒执行
Copier après la connexion

Grâce au code ci-dessus, nous définissons une fonction func(), puis définissons la fonction pour qu'elle s'exécute après 3 secondes. Après 3 secondes, la console affichera le message « Exécuter la fonction ».

2. Utiliser Promise

Promise est une solution de programmation asynchrone. Elle peut envelopper des opérations asynchrones dans un objet, ce qui facilite leur traitement. En utilisant Promise, nous pouvons implémenter la fonction d'effectuer une opération après une certaine période de temps. L'exemple de code est le suivant :

function func() {
  console.log("执行函数");
}

function delay(time) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, time);
  });
}

delay(3000).then(func); // 延迟3秒执行
Copier après la connexion

Dans le code ci-dessus, nous définissons d'abord une fonction func() pour représenter l'opération qui doit être effectuée après un certain temps. Ensuite, nous avons défini une fonction delay(), qui accepte un paramètre time et renvoie un objet Promise. Dans l'objet Promise, nous utilisons la fonction setTimeout() pour implémenter des opérations retardées. Enfin, lors de l'appel de la fonction delay(), nous utilisons la méthode then() pour spécifier la fonction à exécuter après l'expiration du délai.

3. Utiliser async/await

async/await est une nouvelle fonctionnalité introduite dans ES2017. Il s'agit d'une encapsulation et d'une simplification supplémentaires de Promise. Avec l'aide de async/await, nous pouvons rendre le code plus concis et plus facile à comprendre pour implémenter la fonction d'exécution d'une opération après un certain temps. L'exemple de code est le suivant :

function delay(time) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, time);
  });
}

async function func() {
  await delay(3000);
  console.log("执行函数");
}

func(); // 延迟3秒执行
Copier après la connexion

Dans le code ci-dessus, nous définissons d'abord une fonction delay(), qui renvoie un objet Promise pour implémenter des opérations retardées. Ensuite, nous avons défini une fonction asynchrone func(), dans laquelle nous utilisons le mot-clé wait pour attendre l'expiration du délai avant d'effectuer l'opération. Enfin, lors de l'appel de la fonction func(), nous pouvons implémenter la fonction permettant d'effectuer une opération après un certain temps.

Résumé

Cet article présente comment JavaScript peut implémenter la fonction d'exécution d'une opération après une certaine période de temps. En utilisant la fonction setTimeout(), Promise et async/await, nous pouvons implémenter cette fonction de manière flexible et rendre le code plus concis et plus facile à comprendre. Dans le développement réel, nous pouvons choisir la méthode de mise en œuvre appropriée en fonction des besoins spécifiques pour mieux résoudre le problème des opérations d'exécution retardées.

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