JavaScript HTML DOM Window clearInterval() 方法

Window clearInterval() 方法

clearInterval()方法清除使用setInterval()方法设置的计时器。setInterval()返回的ID值用作clearInterval()方法的参数。

注意：为了能够使用clearInterval()方法，必须在创建interval方法时使用变量：

myVar = setInterval("javascript function", milliseconds);

然后，您将能够通过调用clearInterval()方法来停止执行。

clearInterval(myVar);

显示当前时间（setInterval()方法将每1秒执行一次“myTimer”函数）。使用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);
}

尝试一下

浏览器支持

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

语法

clearInterval(var)

参数值

值	类型	描述
var	-	需要。 setInterval()方法返回的计时器的名称

技术细节

项目	描述
返回值：	没有

更多例子

每隔300毫秒切换两次背景颜色，直到它被clearInterval()停止：

var myVar = setInterval(setColor, 300);

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

function stopColor() {
  clearInterval(myVar);
}                                   // Assures that the new window gets focus

尝试一下

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

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

尝试一下