夏日博客

A-A+

JS中的setTimeout和setInterval的区别

2016年10月13日 前端设计 暂无评论 阅读 5 views 次

简单说来: setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression setInterval(expression,delayTime),每个DelayTime,都将执行Expression.
常常可用于刷新表达式.

例1,代码如下:

  1. <div id="a"></div>  
  2. <div id="b"></div>  
  3. <script type="text/javascript">  
  4.     setTimeout("document.getElementById('a').innerHTML=new Date().getSeconds();",1000);  
  5.     setInterval("document.getElementById('b').innerHTML=new Date().getSeconds();",1000);  
  6. </script>  

setInterval() 例,代码如下:

  1. var leftSeconds = 10;  
  2. var intervalId;  
  3. $(function(){  
  4. $("#btnReg").attr("disabled",true);  
  5. intervalId = setInterval("countDown()",1000);  
  6. });  
  7. function countDown(){     
  8. if(leftSeconds <=0){  
  9. $("#btnReg").val("submit");  
  10. $("#btnReg").attr("disabled",false);  
  11. clearInterval(intervalId);  
  12. return;  
  13. }else{  
  14. leftSeconds--;  
  15. $("#btnReg").val("请仔细阅读" + leftSeconds + "秒");  
  16. } //xiariboke.net  
  17. }  
  18. setTimeout()  
  19.   
  20. setTimeout(function(){alert(&quot;Hello World&quot;);},1000)  

会在执行到这句话后延迟1秒钟来弹出alert窗口,那么再看这一段,代码如下:

  1. function a() {  
  2. 　　setTimeout(function(){alert(1)},0);  
  3. 　　alert(2);  
  4. }  
  5. a();  

区别总结:

使用SetInterval和设定延时函数setTimeout 很类似。

setTimeout 运用在延迟一段时间，再进行某项操作。

setTimeout("function",time) 设置一个超时对象

setInterval("function",time) //设置一个超时对象

SetInterval为自动重复，setTimeout不会重复。

clearTimeout(对象) 清除已设置的setTimeout对象

clearInterval(对象) 清除已设置的setInterval对象

标签：

给我留言