Maison > interface Web > js tutoriel > le corps du texte

Comment utiliser la fonction setInterval en Javascript ?

Guanhui
Libérer: 2020-06-24 17:42:51
original
4511 Les gens l'ont consulté

Le rôle de la fonction setInterval en JavaScript est d'appeler une fonction ou de calculer une expression en fonction du temps de cycle spécifié. Sa syntaxe est "setInterval(func,ms)". peut être passé à la fonction "clearInterval" pour annuler l'exécution.

Comment utiliser la fonction setInterval en Javascript ?

Exemple d'utilisation

Vous pouvez apparaître toutes les trois secondes (3 000 millisecondes) en appelant une fonction nommée "Bonjour" :

var myVar;
 
function myFunction() {
    myVar = setInterval(alertFunc, 3000);
}
 
function alertFunc() {
    alert("Hello!");
}
Copier après la connexion

Afficher l'heure actuelle (la méthode setInterval() exécutera la fonction une fois par seconde, similaire à la fonction watch) :

var myVar = setInterval(function(){ myTimer() }, 1000);
 
function myTimer() {
    var d = new Date();
    var t = d.toLocaleTimeString();
    document.getElementById("demo").innerHTML = t;
}
Copier après la connexion

Utilisez clearInterval() pour arrêter l'exécution de setInterval :

var myVar = setInterval(function(){ myTimer() }, 1000);
 
function myTimer() {
    var d = new Date();
    var t = d.toLocaleTimeString();
    document.getElementById("demo").innerHTML = t;
}
 
function myStopFunction() {
    clearInterval(myVar);
}
Copier après la connexion

Utilisez setInterval() et clearInterval() pour créer une barre de progression dynamique :

function move() {
  var elem = document.getElementById("myBar"); 
  var width = 0;
  var id = setInterval(frame, 10);
  function frame() {
    if (width == 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
    }
  }
}
Copier après la connexion

Tutoriel recommandé : "JavaScript"

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!

Étiquettes associées:
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