Window setInterval() 方法

阅读（0）
赞（0）
踩（0）
纠错

Window 对象

定义和用法

setInterval() 方法以指定的时间间隔（以毫秒为单位）调用函数。

setInterval() 方法会周期性调用函数，直到调用 clearInterval() 或关闭窗口。

注释：1 秒 = 1000 毫秒。

提示

如需仅执行一次函数，请改用 setTimeout() 方法。

如需清除间隔，请使用 setInterval() 返回的 id：

myInterval = setInterval(function, milliseconds);

然后你可以通过调用 clearInterval() 来停止执行：

clearInterval(myInterval);

另请参阅：

clearInterval() 方法

setTimeout() 方法

clearTimeout() 方法

实例

例子 1

每秒显示 "Hello"（1000 毫秒）：

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

亲自试一试

例子 2

每秒调用一次 displayHello：

setInterval(displayHello, 1000);

亲自试一试

页面下方提供更多实例。

语法

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

参数

参数	描述
function	必需。要执行的函数
milliseconds	必需。执行间隔。如果值小于 10，则使用 10。
param1, param2, ...	可选。传递给函数的附加参数。 IE9 及更早版本不支持。

描述

function

必需。要执行的函数

milliseconds

必需。执行间隔。

如果值小于 10，则使用 10。

param1, param2, ...

可选。传递给函数的附加参数。

IE9 及更早版本不支持。

返回值

类型	描述
数字	计时器的 ID。请将此 id 与 clearInterval() 一起使用以取消计时器。

浏览器支持

所有浏览器都支持 setInterval()：

Chrome	IE	Edge	Firefox	Safari	Opera
Chrome	IE	Edge	Firefox	Safari	Opera
支持	支持	支持	支持	支持	支持

更多实例

例子 3

像电子表一样显示时间：

setInterval(myTimer, 1000);

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

亲自试一试

例子 4

使用 clearInterval() 停止电子表：

const myInterval = setInterval(myTimer, 1000);

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

function myStopFunction() {
  clearInterval(myInterval);
}

亲自试一试

例子 5

使用 setInterval() 和 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 + '%';
    }
  }
}

亲自试一试

例子 6

每 500 毫秒在两种背景颜色之间切换一次：

const myInterval = setInterval(setColor, 500);

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

function stopColor() {
  clearInterval(myInterval);
}

亲自试一试

例子 7

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

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

亲自试一试

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

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

亲自试一试

Window 对象