Maison > interface Web > Questions et réponses frontales > Comment implémenter le timing en javascript

Comment implémenter le timing en javascript

PHPz
Libérer: 2023-04-06 13:58:47
original
5114 Les gens l'ont consulté

Avec le développement continu d'Internet, JavaScript (JS en abrégé) est devenu un élément nécessaire du développement Web. JS peut être utilisé pour gérer la validation des formulaires, les effets d'interaction avec les pages Web, etc. Dans de nombreux cas, nous avons besoin de minuteries pour les opérations planifiées. JavaScript fournit simplement quelques méthodes pour nous aider à implémenter des minuteries.

1. Fonction setInterval

Dans JS, vous pouvez utiliser la fonction setInterval pour implémenter la fonction timer. La fonction setInterval peut appeler une fonction en continu et exécuter cette fonction à intervalles de temps donnés. Cette fonction renvoie un ID numérique qui peut être utilisé pour annuler la minuterie créée en appelant la fonction setInterval.

La syntaxe est la suivante :

setInterval(function, delay, param1, param2, ...)
Copier après la connexion

L'explication est la suivante :

  • function : La fonction à exécuter à plusieurs reprises. function:要重复执行的函数。
  • delay:每次执行函数的时间间隔,单位是毫秒。
  • param1, param2, ...:可以传递给函数的可选参数,最多可以传递11个参数。

以下是一个使用setInterval函数的示例:

var count = 0;
var intervalID = setInterval(function() {
  console.log(count);
  count++;
}, 1000);
Copier après la connexion

上述代码将每秒钟输出一个递增的数值。当数值达到一定的值时,可以使用以下代码取消计时器:

clearInterval(intervalID);
Copier après la connexion

二、setTimeout函数

setTimeout函数也可以用来实现计时器。但是,setTimeout函数只会执行一次,而且需要手动调用setTimeout函数来实现重复执行。因此,setTimeout函数更适用于需要延时执行操作的情况。

语法如下:

setTimeout(function, delay)
Copier après la connexion

解释如下:

  • function:要执行的函数。
  • delay
  • delay : L'intervalle de temps entre chaque exécution de la fonction, en millisecondes.

param1, param2, ... : Paramètres facultatifs pouvant être transmis à la fonction, jusqu'à 11 paramètres peuvent être transmis.

Ce qui suit est un exemple d'utilisation de la fonction setInterval :

setTimeout(function() {
  console.log('Hello World');
}, 1000);
Copier après la connexion

Le code ci-dessus affichera une valeur incrémentielle chaque seconde. Lorsque la valeur atteint une certaine valeur, vous pouvez utiliser le code suivant pour annuler le timer :

var start = new Date().getTime();
var intervalID = setInterval(function() {
  var now = new Date().getTime();
  var elapsed = now - start;
  console.log(elapsed);
  start = now;
}, 1000);
Copier après la connexion
2. Fonction setTimeout

La fonction setTimeout peut également être utilisée pour implémenter un timer. Cependant, la fonction setTimeout ne sera exécutée qu'une seule fois et la fonction setTimeout doit être appelée manuellement pour réaliser une exécution répétée. Par conséquent, la fonction setTimeout est plus adaptée aux situations où une exécution retardée des opérations est requise.

La syntaxe est la suivante :

rrreee

L'explication est la suivante :

function : La fonction à exécuter.

🎜delay : Le temps nécessaire pour retarder l'exécution de la fonction, en millisecondes. 🎜🎜🎜Voici un exemple utilisant la fonction setTimeout : 🎜rrreee🎜Le code ci-dessus affichera un message après une seconde. Si une exécution répétée est requise, la fonction setTimeout peut être à nouveau appelée dans la fonction. 🎜🎜3. Objet Date 🎜🎜L'objet Date peut également être utilisé pour implémenter la fonction de minuterie. Vous pouvez utiliser l'objet Date pour obtenir l'heure système actuelle et effectuer des opérations d'addition et de soustraction d'heure. 🎜🎜Voici un exemple utilisant un objet Date : 🎜rrreee🎜Le code ci-dessus affichera le nombre de millisecondes qui se sont écoulées depuis le dernier démarrage du timing chaque seconde. 🎜🎜4. Résumé🎜🎜Ce qui précède présente trois méthodes d'implémentation des minuteries JS. Les fonctions setInterval et setTimeout sont des méthodes relativement directes et pratiques, tandis que l'objet Date est relativement plus complexe, mais peut également être utilisé de manière flexible en fonction de besoins spécifiques. Il convient de noter que si vous devez annuler le timer, vous devez penser à enregistrer l'ID renvoyé par le timer et appeler la fonction clearInterval ou clearTimeout pour annuler l'exécution du timer. 🎜🎜Dans le développement réel, les minuteries sont souvent utilisées pour créer des effets dynamiques, tels que l'affichage de comptes à rebours, le traitement d'effets d'animation, etc. Il est donc très important d’apprendre à utiliser les minuteries, qui peuvent nous permettre de mieux obtenir les effets dont nous avons besoin. 🎜

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