以下方法均为window对象的方法,window为最高层,故调用的时候可不写用window调用,都默认为window调用
1.setInterval()
按照指定的周期(以毫秒计时)来调用函数或计算表达式
<script>
var i = 0;
function count(){
console.log(i);
i++
}
setInterval("count()",2000);//第一次调用count()方法在2s后,此后每2s调用一次count()方法
//2000表示2000毫秒
</script>
2.clearInterval()
取消由 setInterval() 设置的 timeout,通过获取到setInterval的id值传入clearInterval()方法中,使setInterval停下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var i = 0;
function count(){
console.log(i);
i++
}
var id = setInterval("count()",2000);//获取setInterval方法的id值
function stop(){
clearInterval(id);//调用stop方法时,执行clearInterval,传入setInterval方法的id值,使其停下
}
</script>
</head>
<body>
<input type="button" value="按钮" onclick="stop()"/>//点击按钮触发stop()方法
</body>
</html>
3.setTimeout()
在指定的毫秒数后调用函数或计算表达式,只执行一次
<script>
var i = 0;
function count(){
console.log(i);
i++
}
setTimeout("count()",2000);//2s后调用count()方法,调用结束后setTimeout方法结束
</script>
4.clearTimeout()
取消由 setTimeout() 方法设置的 timeout
分析:
①由于,setTimeout方法是在指定毫秒数后调用方法,且只能调用一次
②调用完指定方法后setTimeout方法也就结束了
③如果在调用完一次指定方法(即setTimeout方法结束)后,再调用clearTimeout方法就没有意义了
④所以如果在调用完一次指定方法(即setTimeout方法结束)前,调用clearTimeout方法使setTimeout方法结束
⑤即setTimeout方法还没来得急调用一次指定方法就结束了
⑥程序没有任何输出
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var i = 0;
function count(){
console.log(i);
i++
}
var id = setTimeout("count()",20000);//setTimeout() 返回的 ID 值可用作 clearTimeout() 方法的参数
function stop(){
clearTimeout(id);//调用stop方法时,执行clearTimeout,传入setTimeout方法的id值,使其停下
}
</script>
</head>
<body>
<input type="button" value="按钮" onclick="stop()"/>//点击按钮触发stop()方法
</body>
</html>