`
Everyday都不同
  • 浏览: 713865 次
  • 性别: Icon_minigender_1
  • 来自: 宇宙
社区版块
存档分类
最新评论

setInterval和setTimeout

阅读更多

如题所示的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="取消定时器" onclick="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操作产生)。

 

======================================  总结完毕=====================================

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics