setTimeout定时器以及部分小知识点
setTimeout定时器
难点：
- 按固定格式输出（hh:mm:ss）
- 开始，暂停，开始
- 解决多次点击开始会使定时器速度加快的问题
1. 按固定格式输出
function formatNumber(num) {
return num < 10 ? '0' + num : num;
}思路：在每次输出之前格式化一下数据，使用三元运算符，如果小于10就在前面补0。
2. 开始，暂停，开始
var flag = 1;
function Timer() {
flag = 1;
if (flag == 1) {
if (sec <= 59 && sec >= 0 && min <= 59 && min >= 0 && hou <= 59 && hou >= 0) {
document.getElementById('showTime').innerHTML = formatN(hou) + ":" + formatN(min) + ":" + formatN(sec);
sec = sec + 1;
} else if (min <= 59 && min >= 0 && hou <= 59 && hou >= 0) {
min = min + 1;
sec = 0;
} else if (hou <= 59 && hou >= 0) {
hou = hou + 1;
min = 0;
sec = 0;
}
window.timer = setTimeout("Timer()", 1000);
}
}
function stop() {
clearTimeout(timer);
flag = 0;
}思路：加一个标记flag，开始执行之后改变flag为原来的值并启动定时器，暂停的时候改变flag的值。
3. 解决多次点击开始会使定时器速度加快的问题
出现这个问题的原因：
假如你在0时刻点击了一下按钮，那么500ms时数字会跳一下，1000ms会再跳一下，依次类推，1500，2000，2500…..的时候都会跳一下，时间间隔始终是500ms，但是，假如你在300ms的时候又点击了一下按钮，那么800ms的时候数字就会跳一下，1300，1800，2300…..的时侯都会跳一下，那么现在看0到2000ms之间，300，500，800，1000，1300，1500，1800，2000时刻时数字都会跳一下，数字变化的时间间隔自然会变小，同理，你点击的次数越多，时间间隔就会越小。
解决方案：
每次启动定时器的时候先清一下定时器（clearTimeout()）,此时会有另一个问题，先清定时器会报错：定时器未定义，解决方法是：
if(window.t) clearTimeout(window.t);
window.t = setTimeout(..... );window上即使未定义也不会报错。
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
#showTime {
color: red;
font-size: 30px;
font-weight: 700;
}
</style>
</head>
<body>
<h1>setTimeout实现计时器</h1>
<script>
var sec = 0;
var min = 0;
var hou = 0;
var flag = 1;
function Timer() {
flag = 1;
if (flag == 1) {
if (sec <= 59 && sec >= 0 && min <= 59 && min >= 0 && hou <= 59 && hou >= 0) {
document.getElementById('showTime').innerHTML = formatNumber(hou) + ":" + formatNumber(min) + ":" + formatNumber(sec);;
sec = sec + 1;
} else if (min <= 59 && min >= 0 && hou <= 59 && hou >= 0) {
min = min + 1;
sec = 0;
} else if (hou <= 59 && hou >= 0) {
hou = hou + 1;
min = 0;
sec = 0;
}
if (window.timer) {
clearTimeout(timer);
}
window.timer = setTimeout("Timer()", 1000);
}
}
function formatNumber(num) {
return num < 10 ? '0' + num : num;
}
function stop() {
clearTimeout(timer);
flag = 0;
}
</script>
<button onclick="Timer()">开始计时</button>
<button onclick="stop()">暂停计时</button>
<p id="showTime">00:00:00</p>
</body>
</html>运行结果：
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018年07月26日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
