setTimeout：
执行一次，第一个参数是要执行的函数（function），第二个参数是定时时间（number），单位毫秒，cleartimeout停止
代码：
<!DOCTYPE html>
<html>
<head>
<title>定时测试</title>
</head>
<body style="text-align: center;">
<h1>定时测试</h1>
<button onclick="t1 = setTimeout(display1,3000)">一次计时</button>
<button onclick="clearTimeout(t1)">停止</button>
<p id="demo"></p>
</body>
<script>
function display1(){
document.getElementById("demo").innerHTML = "计时三秒";
}
</script>
</html>setInterval：
执行多次，直到停止，clearInterval停止（其余和setTImeout相同）
代码：
<!DOCTYPE html>
<html>
<head>
<title>定时测试</title>
</head>
<body style="text-align: center;">
<h1>定时测试</h1>
<button onclick="t2 = setInterval(display2,1000)">多次计时</button>
<button onclick="clearInterval(t2)">停止</button>
<p id="demo"></p>
</body>
<script>
var time_number = 0;
function display2(){
time_number += 1;
document.getElementById("demo").innerHTML = "计时" + time_number + "秒";
}
</script>
</html>额外说明：
1.setTimeou和setIntervalt第一个参数的函数不能传参（也无需加括号"()"）
解决方案（最简单的一种）：创建一个匿名函数，函数内部调用一个可以传参的函数
<!DOCTYPE html>
<html>
<head>
<title>定时测试</title>
</head>
<body style="text-align: center;">
<h1>定时测试</h1>
<button onclick="t1 = setTimeout(function(){display('三秒后')},3000)">一次计时</button>
<!-- 传参问题解决方案 -->
<button onclick="clearTimeout(t1)">停止</button>
<p id="demo"></p>
</body>
<script>
function display(value){
document.getElementById("demo").innerHTML = value;
}
</script>
</html>2.setTimeout实现多次计时
<!DOCTYPE html>
<html>
<head>
<title>定时测试</title>
</head>
<body style="text-align: center;">
<h1>定时测试</h1>
<button onclick="circle_setTimeout()">开始计时/继续</button>
<button onclick="clearTimeout(t1)">暂停</button>
<button onclick="clear_t1()">清零</button>
<p id="demo"></p>
</body>
<script>
function display(value){
document.getElementById("demo").innerHTML = value;
}
var time_number = 0;
var t1 = 0;
function circle_setTimeout(){
display("已过" + time_number + "秒");
time_number += 1;
t1 = setTimeout(circle_setTimeout,1000);
}
function clear_t1(){
time_number = 0;
display("已过" + time_number + "秒");
}
</script>
</html>（ps：有个已知bug，多次点击计时速度会加倍，加倍速度根据点击次数增加
解决方案是设置标志位flag=0，第一次点击后flag=1，点击暂停后flag=0，flag=0时生效）
版权声明：本文为qq_52824207原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。