Méthode setInterval() de Window

Définition et utilisation

setInterval() La méthode appelle la fonction à intervalles réguliers (en millisecondes).

setInterval() La méthode appelle périodiquement la fonction jusqu'à ce que clearInterval() ou fermez la fenêtre.

Remarque :1 seconde = 1000 millisecondes.

Avis

Pour exécuter la fonction une seule fois, utilisez plutôt setTimeout() méthode.

Pour supprimer l'intervalle, utilisez setInterval() ID retourné :

myInterval = setInterval(function, milliseconds);

Ensuite, vous pouvez appeler clearInterval() pour arrêter l'exécution :

clearInterval(myInterval);

Veuillez également consulter :

Méthode clearInterval()

Méthode setTimeout()

Méthode clearInterval()

Exemple

Exemple 1

Affiche "Hello" toutes les secondes (1000 millisecondes) :

setInterval(function () {element.innerHTML += "Hello"}, 1000);

Essayez-le vous-même

Exemple 2

Appel de displayHello toutes les secondes :

setInterval(displayHello, 1000);

Essayez-le vous-même

D'autres exemples sont fournis en bas de la page.

Syntaxe

setInterval(function, milliseconds, param1, param2, ...)

Paramètres

Paramètres Description
function Obligatoire. Fonction à exécuter
milliseconds

Obligatoire. Intervalle d'exécution.

Si la valeur est inférieure à 10, utilisez 10.
param1, param2, ...

Optionnel. Paramètres supplémentaires passés à la fonction.

IE9 et versions antérieures ne le supportent pas.

Valeur de retour

Type Description
Numérique

L'ID du timer.

Veuillez associer cet id à clearInterval() Utilisez-les ensemble pour annuler le timer.

Support du navigateur

Tous les navigateurs le supportent setInterval()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support Support Support Support Support Support

Plus d'exemples

Exemple 3

Affichez l'heure comme une horloge électronique :

setInterval(myTimer, 1000);
function myTimer() {
  const date = new Date();
document.getElementById("demo").innerHTML = date.toLocaleTimeString();
}

Essayez-le vous-même

Exemple 4

Arrêtez l'horloge électronique en utilisant clearInterval() :

const myInterval = setInterval(myTimer, 1000);
function myTimer() {
  const date = new Date();
  document.getElementById("demo").innerHTML = date.toLocaleTimeString();
}
function myStopFunction() {
  clearInterval(myInterval);
}

Essayez-le vous-même

Exemple 5

Créez une barre de progression dynamique en utilisant setInterval() et clearInterval() :

function move() {
  const element = document.getElementById("myBar");
  let width = 0;
  let id = setInterval(frame, 10);
  function frame() {
    if (width == 100) {
      clearInterval(id);
    } else {
      width++;
      element.style.width = width + '%';
    }
  }
}

Essayez-le vous-même

Exemple 6

Changez de couleur de fond toutes les 500 millisecondes entre les deux couleurs :

const myInterval = setInterval(setColor, 500);
function setColor() {
  let x = document.body;
  x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";
}
function stopColor() {
  clearInterval(myInterval);
}

Essayez-le vous-même

Exemple 7

Transmettez les paramètres à la fonction (ne fonctionne pas dans Internet Explorer 9 et versions antérieures) :

setInterval(myFunc, 2000, "param1", "param2");

Essayez-le vous-même

Mais, si vous utilisez une fonction anonyme, cela fonctionne pour tous les navigateurs :

setInterval(function() {myFunc("param1", "param2")}, 2000);

Essayez-le vous-même