1.setInterval与setTimeout的区别
- setInterval
setInterval()方法可按照指定的周期来调用函数或者计算表达式（以毫秒为单位）
语法：
setInterval(函数表达式，毫秒数)；
setInterval()会不停的调用函数，直到clearInterval()被调用或者窗口被关闭，由 setInterval()返回的ID值可用作clearInterval()方法的参数。
- setTimeout
setTimeout()方法用于在指定毫秒数后再调用函数或者计算表达式（以毫秒为单位）
语法：
setTimeout(函数表达式，毫秒数)；
setTimeout()只执行函数一次，如果需要多次调用可以使用setInterval(),或者在函数体内再次调用setTimeout()
- 区别
通过以上分析可以看出，setTimeout与setInterval的主要区别是:
setTimeout()方法只运行一次，也就是说当达到设定的时间后就出发运行指定的代码，运行完后就结束了，如果还想再次执行同样的函数，可以在函数体内再次调用setTimeout()，可以达到循环调用的效果。
setInterval()是循环执行的，即每达到指定的时间间隔就执行相应的函数或者表达式，是真正的定时器。
2.setTimeout()的用法
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script>
setTimeout("alert('hello')",2000);
</script>
</head>
<body>
</body>
</html>- 效果：
页面会在停留2秒之后弹出对话框,注意setTimeout不会自动重复执行！
当然，setTimeout也可以执行function，还可以不断重复执行！
更加灵活的是，你还可以指定重复执行的次数，如下：
if判断中的数字，是用来限制重复执行次数的条件。
3.clearTimeout()
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script>
var timeId= setTimeout("alert('hello')",2000);
clearTimeout(timeId);
</script>
</head>
<body>
</body>
</html>- 效果：
要使用clearTimeout()，需要我们设定setTimeout()时， 给予这setTimeout()一个名称, 这名称就是timeoutID ，我们叫停时，就是用这 timeoutID 来叫停
原计划2秒后弹出的警示框，被自然叫停了。
4.实例
- 需求
点击按钮后，需要过一段时间后才能再次点击(按钮变灰)，防网络延迟和重复提交
- 代码
var wait = 3;//间隔3秒
document.getElementById("draft2").onclick = function() {
time(this);
}
function time(o) {
if (wait == 0) {
o.removeAttribute("disabled");
wait = 3;
} else {
o.setAttribute("disabled", true);
wait--;
setTimeout(function() {
time(o)
}, 1000)
}
}
3761
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
