Window clearInterval() 方法

JavaScript Window 对象

clearInterval()方法取消使用的setInterval() 创建的重复动作。

setInterval()返回的ID值用作clearInterval()方法的参数。

注意:为了能够使用clearInterval()方法,在创建interval方法时必须使用一个变量:

t = setInterval("javaScript function", milliseconds);

然后,您可以通过调用clearInterval()方法来停止执行:

clearInterval(t);

语法:

window.clearInterval(var)
var t = 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(t);
}
测试看看‹/›

浏览器兼容性

表中的数字指定了完全支持clearInterval()方法的第一个浏览器版本:

Method
clearInterval()11414

参数值

参数描述
varsetInterval()方法返回的计时器的名称

技术细节

返回值:没有

更多实例

每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);
}
测试看看‹/›

使用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);
}
测试看看‹/›

相关参考

窗口(Window)参考:setInterval()方法

窗口(Window)参考:setTimeout()方法

窗口(Window)参考:clearTimeout()方法

窗口(Window)参考:requestAnimationFrame()方法

JavaScript Window 对象