English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Méthode setInterval() de la fenêtre

Objet Window JavaScript

setInterval()Méthode qui appelle une fonction ou un segment de code à intervalles réguliers, avec un délai fixe entre chaque appel.

La méthode setInterval() appelle de manière continue la fonction ou le code spécifié jusqu'à ce que vous appeliezclearInterval()Méthode ou en fermant la fenêtre.

Cette méthode retourne un identifiant unique de l'intervalle, donc vous pouvez le supprimer par la suite en appelant clearInterval() ou en fermant la fenêtre.

Pour exécuter une fonction une seule fois dans un laps de temps spécifié en millisecondes, utilisezsetTimeout()Méthode.

Syntaxe :

window.setInterval(function, delay, param1, param2, ...)
setInterval(function() { alert("Hello World"); }, 2000);
Voyons si...‹/›

Compatibilité du navigateur

Les numéros dans le tableau indiquent la première version du navigateur qui prend en charge pleinement la méthode setInterval() :

Méthode
setInterval()11414

Valeur des paramètres

ParamètresDescription
functionObligatoire) Chaquedelay (délai)Appeler la fonction toutes les millisecondes
delayObligatoire) Le compteur doit être exprimé en millisecondes (1000 ms = 1secondes), reportez le délai entre l'exécution de la fonction ou du code spécifié.10En cas de non spécification, utilisez la valeur10
param1, param2, ...Facultatif) Transmettez cettefunction(fonction)Autres paramètres (IE9Et les versions plus anciennes ne le supportent pas)

技术细节

返回值:一个数字,表示设置的计时器的间隔ID值。将此值与clearInterval()方法一起使用可取消计时器

更多实例

此示例引用外部“命名”函数:

var intervalID;
function myFunc() {
  intervalID = setInterval(myCallback, 2000);
}
function myCallback() {
  alert("Hello World");
}
Voyons si...‹/›

显示当前时间(就像数字手表一样,每1秒钟执行一次“ startTimer()”函数):

var intervalID = setInterval(startTimer, 1000);
function startTimer() {
   var date = new Date();
   var x = document.getElementById("result");
   x.innerHTML = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
}
Voyons si...‹/›

在上一个示例中,使用clearInterval()来停止时间:

var intervalID = setInterval(startTimer, 1000);
function startTimer() {
   var date = new Date();
   var x = document.getElementById("result");
   x.innerHTML = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
}
function stopTimer() {
   clearInterval(intervalID);
}
Voyons si...‹/›

每200毫秒一次在两种背景颜色之间切换,直到由clearInterval()将其停止:

var t = setInterval(setColor, 200);
function setColor() {
   var x = document.body;
   x.style.backgroundColor = (x.style.backgroundColor == "coral") ? "lightgreen" : "coral";
}
function stopColor() {
   clearInterval(t);
}
Voyons si...‹/›

使用setInterval()和clearInterval()创建动态进度条:

var i = 0;
var bar = document.getElementById("progress",-bar);
var t;
function start() {
  t = setInterval(progress, 60);
}
function progress() {
  if(i < 100) {
 i++;
 bar.style.width = i + "%";
 bar.innerHTML = i + " %";
  } else {
 clearInterval(t);
  }
}
function stop() {
  clearInterval(t);
}
Voyons si...‹/›

Passer des paramètres à la fonction myFunc (dans IE9et ne fonctionne pas dans les versions antérieures) :

var intervalID = setInterval(myFunc, 2000, "First", "Second", "Third");
Voyons si...‹/›

Cependant, si vous utilisez une fonction anonyme, elle fonctionnera dans tous les navigateurs :

var intervalID = setInterval(function() { myFunc("First", "Second", "Third"); }, 2000);
Voyons si...‹/›

Références associées

Référence Fenêtre (Window) :Méthode clearInterval()

Référence Fenêtre (Window) :Méthode setTimeout()

Référence Fenêtre (Window) :Méthode clearTimeout()

Objet Window JavaScript