在HTML文档中的window对象,拥有许多常用方法,其中的两个用法较为相似的方法为setInterval()和setTimeout()方法:
1.setInterval()
按照指定的周期(以毫秒计)来调用函数或计算表达式。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数 。
以下使用Date内置对象来演示该方法的作用效果:
在该段代码中,将test()方法名传入setInterval方法的参数列表中,并设置间隔时长为1000毫秒,意味着每隔一秒打印一次当前的时间信息:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
function test(){
var date = new Date();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
var current = hour+":"+minute+":"+second;
console.log(current);
}
var id = setInterval("test()",1000);
</script>
<span onclick="test()">点我</span>
</body>
</html>
2.setTimeout()
该方法的作用为:在指定的毫秒数后调用函数或计算表达式。由 setTimeout() 返回的 ID 值可用作 clearTimeout() 方法的参数。
以下还是使用Date内置对象来演示该方法的作用效果:
在该段代码中,将test()方法名传入setTimeout方法的参数列表中,并设置间隔时长为5000毫秒,意味着该方法会在5秒后执行,所以打印的第一条时间信息是16:20:39,而5秒之后执行test()方法中的时间输出语句,打印的第二条时间信息就是16:20:44。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var date = new Date();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
var current = hour+":"+minute+":"+second;
console.log(current);
function test(){
console.log("到我了");
date = new Date();
hour = date.getHours();
minute = date.getMinutes();
second = date.getSeconds();
current = hour+":"+minute+":"+second;
console.log(current);
}
var id = setTimeout("test()",5000);
</script>
<span onclick="test()">点我</span>
</body>
</html>
这里还提到了clearInterval()方法和clearTimeout()方法:
clearInterval():取消由 setInterval() 设置的 timeout。
clearTimeout():取消由 setTimeout() 方法设置的 timeout。