JavaScript定时器示例
在前端，我们有很多功能需要用到定时器（Timing）。譬如轮询，譬如定时关闭弹框，譬如实现秒表，譬如一段时间后跳转页面等等。因此，我们需要掌握定时器的用法。
window对象提供有两个方法（也称为函数）来实现定时器的效果，分别是window.setTimeout()和window.setInterval()。
setTimeout函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。使用格式：
var t = [window.]setTimeout(func|code [, delay, [param1, ...]]);
参数：
func|code： 是将要推迟执行的函数名或者一段代码。
delay： 是推迟执行的毫秒数。如果省略，则使用值0，意味着“马上”（ 尽快）执行。
param1：（可选）传给执行函数的其他参数——它们将依次传入推迟执行的函数（回调函数）。
返回值：一个数字，表示设置的计时器的超时ID值。将此值与clearTimeout()方法一起使用可取消计时器。每设置一个定时器，都要对应清除释放资源，若想取消setTimeout设置定时器，可用：clearTimeout(t);
setInterval()函数的用法与setTimeout完全一致，区别仅仅在于setInterval指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行。使用格式：
var t = [window.]setInterval(func|code [, delay, [param1, ...]]);
每设置一个定时器，都要对应清除释放资源，若想取消setInterval设置定时器，可用：clearInterval(t);
特别提示： setInterval()会循环调用，setTimeout()只执行一次。
window.setInterval - Web API 接口参考 | MDN
window.setTimeout - Web API 接口参考 | MDN
例子1、setInterval()的例子，源码如下：
<html>
<head>
<meta charset="utf-8">
<title>Interval定时器示例</title>
</head>
<body>
<button onclick="stopInterval()">停止Interval</button>
<script>
var intervalBox;
//设置interval定时器
intervalBox = setInterval(showInterval, 500);//定时器间隔时间500ms
function showInterval() {
document.getElementById("demo").innerHTML = new Date(); //演示interval定时器效果
}
//结束interval定时器
function stopInterval() {
clearInterval(intervalBox);//清除interval定时器
}
</script>
<p>interval定时器效果显示，请留意时间是变化的: </p>
<p id="demo"> </p>
</body>
</html>
保存文件名为：定时器例1.html
用浏览器运行测试之，效果如下：
例2、setTimeout()的例子，源码如下：
<html>
<head>
<meta charset="utf-8">
<title>Timeout定时器示例</title>
</head>
<body>
<button onclick="stopTimeout()">停止Timeout</button>
<script>
var timeoutBox;
//设置Timeout定时器
timeoutBox = setTimeout(showTimeout, 500);//定时器间隔时间500ms
function showTimeout() {
document.getElementById("demo").innerHTML = new Date(); //演示Timeout定时器效果
}
//结束Timeout定时器
function stopTimeout() {
clearTimeout(timeoutBox);//清除Timeout定时器
}
</script>
<p>Timeout定时器效果显示，请留意时间是不变的: </p>
<p id="demo"> </p>
</body>
</html>
保存文件名为：定时器例2.html
用浏览器运行测试之，效果如下：
例子3、用setInterval实现计数器功能，源码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 用setInterval实现计数器功能</title>
</head>
<body>
<style>
#result {
color: #ec181e;
text-align:center;
font-size: 15vw;
font-weight: 600;
font-family: Lato;
text-shadow: 0 6px 4px rgba(255, 100, 100, 0.6);
}
</style>
<h3>用setInterval实现计数器功能</h3>
<div id="result">0</div>
<button onclick="startCount()">开始计数</button>
<button onclick="stopCount()">停止计数</button>
<p>单击上方的"开始计数"按钮以启动计时器。</p>
<p>点击"停止计数"按钮停止计数。</p>
<p>单击"开始计数"按钮以再次启动计时器。</p>
<script>
var counter = 0;
var is_timer_on = false;
var t;
function timedCount() {
document.getElementById("result").innerHTML = counter;
counter++;
}
function startCount() {
if (!is_timer_on) {
is_timer_on = true;
t = setInterval(timedCount, 1000);
}
}
function stopCount() {
clearTimeout(t);
is_timer_on = false;
}
</script>
</body>
</html>
保存文件名为：计时器1.html
用浏览器运行测试之，效果如下：
例子4、用setTimeout实现计数器功能，源码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 用setTimeout实现计数器功能</title>
</head>
<body>
<style>
#result {
color: #ec181e;
text-align:center;
font-size: 15vw;
font-weight: 600;
font-family: Lato;
text-shadow: 0 6px 4px rgba(255, 100, 100, 0.6);
}
</style>
<h3>用setTimeout实现计数器功能</h3>
<div id="result">0</div>
<button onclick="startCount()">开始计数</button>
<button onclick="stopCount()">停止计数</button>
<p>单击上方的"开始计数"按钮以启动计时器。</p>
<p>点击"停止计数"按钮停止计数。</p>
<p>单击"开始计数"按钮以再次启动计时器。</p>
<script>
var counter = 0;
var is_timer_on = false;
var t;
function timedCount() {
document.getElementById("result").innerHTML = counter;
counter++;
t = setTimeout(timedCount, 1000); //timedCount递归调用
}
function startCount() {
if (!is_timer_on) {
is_timer_on = true;
timedCount();
}
}
function stopCount() {
clearTimeout(t);
is_timer_on = false;
}
</script>
</body>
</html>
保存文件名为：计时器2.html
用浏览器运行测试之，效果如下：
