如题所示的2个方法是很重要的,而以前对它们的认知比较笼统。最近用到了,虽然比较简单但还是好好总结一下~~
<html >
<head>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" >
var timer;
$(function() {
setTimeout(function() {
timer = setInterval(call, 3000)
}, 2000);
});
function call() {
alert("Hebe");
}
function cancel() {
clearInterval(timer);
}
</script>
</head>
<body>
<input type="button" value="取消定时器" οnclick="cancel()" />
</body>
</html>
这个小例子,把setInterval和setTimeout的语法都用上了,麻雀虽小、五脏俱全。
加载这个页面,会在5s后弹出'Hebe',之后再每隔2s循环弹出'Hebe',一段时间后你点击按钮,则不会再有定时弹出操作了。
归纳下一些语法——
1)setTimeout(方法名, 时间/ms) 运用在延迟一段时间,再进行某项操作。注意第一个参数是js方法名,不用带括号。它没有每隔一段时间重复执行的作用;(有误,当有参数的时候还是要带括号,没参数的时候可带可不带)
2)setInterval(方法名, 时间/ms) 运用在每隔一段时间,重复进行某项操作。注意第一次执行该操作时,会在指定的间隔时间之后再执行,而不是立即执行第一次操作,这也是为啥上述小例子是经过5s而不是3s后第一次弹出'Hebe';
3)setTimeout可以通过在他作用的方法里回调方法本身来达到setINterval的效果,即在它作用的js方法里最后再加上这么一句:setTimeout(本方法名, 时间/ms)——这体现了递归;
4)取消定时器,无论是timeout还是interval都是用以下语法:clearTimeout(定时器名)或clearInterval(定时器名);;其中定时器名是你在set的时候赋值的,如var timer = setTimeout(Interval) (方法名, 时间/ms);
5)注意到set操作的对象是js函数名,clear操作的对象是定时器(由set操作产生)。
====================================== 总结完毕=====================================