setInterval()、clearInterval()、setTimeout()和clearTimeout()js计数器方法

时间 2019-11-30

标签 setinterval clearinterval settimeout cleartimeout 计数器方法栏目 JavaScript 繁體版

原文原文链接

原文地址：http://caibaojian.com/setinterval-settimeout.htmljavascript

window.setInterval()方法html

介绍

周期性地调用一个函数(function)或者执行一段代码。java

语法

var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
var intervalID = window.setInterval(code, delay);

这里函数

intervalID 是此重复操做的惟一辨识符，能够做为参数传给clearInterval()。
func 是你想要重复调用的函数。
code 是另外一种语法的应用，是指你想要重复执行的一段字符串构成的代码(使用该语法是不推荐的，不推荐的缘由和eval()同样)。
delay 是每次延迟的毫秒数 (一秒等于1000毫秒)，函数的每次调用会在该延迟以后发生。和setTimeout同样，实际的延迟时间可能会稍长一点。

须要注意的是,IE不支持第一种语法中向延迟函数传递额外参数的功能.若是你想要在IE中达到一样的功能,你必须使用一种兼容代码 (查看callback arguments 一段).ui

示例

例１：基本用法

var intervalID = window.setInterval(animate, 500);

例２：两种颜色的切换

下面的例子里会每隔一秒就调用函数flashtext()一次，直至你经过按下Stop按钮来清除本次重复操做的惟一辨识符intervalID。spa

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>setInterval/clearInterval example</title>
<script type="text/javascript">
var nIntervId;

function changeColor() {
  nIntervId = setInterval(flashText, 500);
}

function flashText() {
  var oElem = document.getElementById("my_box");
  oElem.style.color = oElem.style.color == "red" ? "blue" : "red";
}

function stopTextColor() {
  clearInterval(nIntervId);
}
</script>
</head>

<body onload="changeColor();">
<div id="my_box">
<p>Hello World</p>
</div>
<button onclick="stopTextColor();">Stop</button>
</body>
</html>

window.clearInterval()方法code

概述

取消掉用setInterval设置的重复执行动做.htm

语法

window.clearInterval(intervalID)

intervalID是你想要取消的重复动做的ID,这个ID是个整数,是由setInterval()返回的.ip

window.setTimeout方法作用域

概述

在指定的延迟时间以后调用一个函数或者执行一个代码片断.

语法

var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);
var timeoutID = window.setTimeout(code, delay);

说明:

timeoutID 是该延时操做的数字ID, 此ID随后能够用来做为window.clearTimeout方法的参数.
func 是你想要在delay毫秒以后执行的函数.
code 在第二种语法,是指你想要在delay毫秒以后执行的代码 (使用该语法是不推荐的, 不推荐的缘由和eval()同样)
delay 是延迟的毫秒数 (一秒等于1000毫秒),函数的调用会在该延迟以后发生.可是实际的延迟时间可能会稍长一点,查看下面的备注.

须要注意的是,IE不支持第一种语法中向延迟函数传递额外参数的功能.若是你想要在IE中达到一样的功能,你必须使用一种兼容代码 (查看callback arguments 一段).

备注

你可使用 window.clearTimeout()来取消延迟操做.

若是你但愿你的代码被重复的调用 (好比每 N 毫秒一次),考虑使用window.setInterval().

传递字符串字面量

向setTimeout()传递一个字符串而不是函数会遭受到与使用eval同样的风险.

// 推荐
window.setTimeout(function() {
    alert("Hello World!");
}, 500);

// 不推荐
window.setTimeout("alert("Hello World!");", 500);

字符串会在全局做用域内被解释执行,因此当setTimeout()函数执行完毕后,字符串中的变量不可用.

setTimeout()方法是在等待指定时间后执行函数, 且只执行一次传入的句柄函数. setInterval()方法是每指定间隔时间后执行一次传入的句柄函数,循环执行直相当闭窗口或clearInterval().

<!Doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>setInterval</title>
</head>
<body>
<p>点击按钮查看效果(2s后弹出): <input type="button" value="setTimeout" /> <input type="button" value="clearTimeout" /></p>
<p>点击按钮查看效果(每2s弹出):<input type="button" value="setInterval" /> <input type="button" value="clearInterval" /></p>
<div id="ul1">
<input type="text" id="clock" size="35"/>
<button onclick="window.clearInterval(c)">stop Interval</button>
</div>
<script type="text/javascript">
var c = self.setInterval("clock()",50);
function clock(){
var t = new Date();
document.getElementById("clock").value=t;
}
var timeout=function(){
alert('等待2s后弹出,仅此一次!在等待时间内clearTimeout可中止执行!')
}
var interval=function(){
alert('每2s循环弹出,直至clearInterval或关闭窗口!')
}
var input=document.getElementsByTagName('input');
console.log(input.length);
var clearTimeoutFun=null;
var clearIntervalFun=null;

input[0].onclick=function(){
clearTimeoutFun=setTimeout(timeout,2000);
}
input[1].onclick=function(){
clearTimeout(clearTimeoutFun);
}
input[2].onclick=function(){
clearIntervalFun=setInterval(interval,2000);
}
input[3].onclick=function(){
clearInterval(clearIntervalFun);
}
</script>
</body>
</html>