JavaScript HTML DOM Window setInterval() 方法

Window setInterval() 方法

setInterval()方法以指定的时间间隔（以毫秒为单位）调用函数或计算表达式。，setInterval()方法将继续调用该函数，直到调用clearInterval()或关闭窗口。setInterval()返回的ID值用作clearInterval()方法的参数。

提示： 1000毫秒= 1秒。

提示：要在指定的毫秒数后执行一次函数，请使用setTimeout()方法。

每3秒（3000毫秒）警告“你好”：

setInterval(function(){ alert("Hello"); }, 3000);

尝试一下

浏览器支持

项	IE/Edge	Chrome	FireFox	Safari	Opera
方法
setInterval()	4.0+	1.0+	1.0+	1.0+	4.0+

语法

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

参数值

值	描述
function	需要。将要执行的功能
milliseconds	需要。关于执行代码的频率的间隔（以毫秒为单位）。如果该值小于10，则使用值10
param1, param2, ...	可选的。传递给函数的其他参数（IE9及更早版本不支持）

技术细节

项目	描述
返回值：	一个数字，表示设置的计时器的ID值。将此值与clearInterval（）方法一起使用可取消计时器

更多例子

您还可以引用一个“命名”函数; 每3秒（3000毫秒）警告“你好”：

var myVar;

function myFunction() {
  myVar = setInterval(alertFunc, 3000);
}

function alertFunc() {
  alert("Hello!");
}

尝试一下

显示当前时间（setInterval（）方法将每1秒执行一次该函数，就像数字手表一样）：

var myVar = setInterval(myTimer, 1000);

function myTimer() {
  var d = new Date();
  var t = d.toLocaleTimeString();
  document.getElementById("demo").innerHTML = t;
}

尝试一下

使用clearInterval（）在前一个示例中停止时间：

var myVar = setInterval(myTimer, 1000);

function myTimer() {
  var d = new Date();
  var t = d.toLocaleTimeString();
  document.getElementById("demo").innerHTML = t;
}

function myStopFunction() {
  clearInterval(myVar);
}

尝试一下

使用setInterval（）和clearInterval（）创建动态进度条：

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 + '%'; 
    }
  }
}

尝试一下

每300毫秒切换两种背景颜色：

var myVar = setInterval(setColor, 300);

function setColor() {
  var x = document.body;
  x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";
}

function stopColor() {
  clearInterval(myVar);
}

尝试一下

将参数传递给alertFunc函数（在IE9及更早版本中不起作用）：

var myVar;

function myStartFunction() {
  myVar = setInterval(alertFunc, 2000, "First param", "Second param");
}

尝试一下

但是，如果您使用匿名函数，它将适用于所有浏览器：

var myVar;

function myStartFunction() {
  myVar = setInterval(function(){ alertFunc("First param", "Second param"); }, 2000);
}

尝试一下

JavaScript HTML DOM Window setInterval() 方法

Window setInterval() 方法

浏览器支持

语法

参数值

技术细节

更多例子

相关页面