您的位置：首页 > Web前端 > javascript > 正文

setTimeout和setIntelval的用法和区别

更多 时间：2013-11-14 类别：Web前端 浏览量：1667

setTimeout和setIntelval的用法和区别

setTimeout和setIntelval的用法和区别   setInterval定义和用法

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

 

语法

setInterval(code,millisec[,"lang"]) 


	参数



	
		

			
				code
			
				必需。要调用的函数或要执行的代码串。
		

		

			
				millisec
			
				必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。
		

	




	 



	返回值



	一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。



	 



	setInterval实例



	 


  • 
	
  • 
		 
    • 
	
  • 
		
  • 
			JScript 代码   复制
    • 
		
  • 
			
    

<SCRIPT LANGUAGE="JavaScript">
var timeid;
function setTime(){
   var date=new Date();
   var h=date.getHours();
   var m=date.getMinutes();
   var s=date.getSeconds();
   document.getElementById("time").innerHTML=h+":"+m+":"+s;
}
timeid=setInterval("setTime()",1000);//他的调用在外部调用，而不是递归调用，表示每隔1s调用一次
function stop(){
   clearInterval(timeid);
}
</SCRIPT>

		
    • 
	


    
	 
    

    
	setTimeout
    

    
	 
    

  • 
	定义和用法:
    • 

  • 
	setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式。
    • 

  • 
	 
    • 

  • 
	语法:
    • 

  • 
	setTimeout(code,millisec)
    • 

  • 
	 
    • 

  • 
	参数：
    • 

  • 
	code （必需）：要调用的函数后要执行的 JavaScript 代码串。 　　
    • 

  • 
	millisec（必需）：在执行代码前需等待的毫秒数。　　
    • 

  • 
	 
    • 

  • 
	提示：
    • 

  • 
	setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。
    • 

  • 
	 
    • 

  • 
	 
    • 

  • 
	 
    • 

  • 
	setTimeout实例
    • 

  • 
	 
    • 

  • 
	
  • 
		
  • 
			 
    • 
		
  • 
			
  • 
				JScript 代码   复制
    • 
			
  • 
				
    
<SCRIPT LANGUAGE="JavaScript">
var timeid;
function setTime(){
   var date=new Date();
   var h=date.getHours();
   var m=date.getMinutes();
   var s=date.getSeconds();
   document.getElementById("time").innerHTML=h+":"+m+":"+s;
   timeid=setTimeout("setTime()",1000);//递归调用，表示1s后执行一次
}
setTime();//页面加载后开始执行
function stop(){
   clearTimeout(timeid);
}
</SCRIPT>

			
    • 
		
	
	 

    
	setTimeout和setIntelval的区别
    

    
	setTimeout：间隔一段时间后执行，只执行一次
    

    
	setInterval：每隔一段时间执行，执行多次
    

    
	 
    

    
	如何停用计时器
    

    
	如果想停用setInterval可以调用clearInterval()方法，相对应的也有clearTimeout()这个方法，用于随时停止setTimeout，不过一般都用不到。
    

    
	 
    

    
	clearInterval
    

    
	作用是清除对setInterval函数的调用
    

    
	语法格式
    

    
	clearInterval(intervalid);
    

    
	参数
    

    
	intervalid是调用setInterval函数后返回的对象。
    

    
	 
    

    
	clearInterval实例
    

    
	 
    

  • 
	
  • 
		 
    • 
	
  • 
		
  • 
			JScript 代码   复制
    • 
		
  • 
			
    
function auto(){ 
alert("到时间了") 
} 
var monitorInterval = null;  
function setAuto(time,isFrist){ 
var intervalTime=time; 
if(isFrist!="1"){ 
if(intervalTime!="off"){ 
monitorInterval= setInterval("auto()", intervalTime*1000); 
}else{ 
if(monitorInterval){    
clearInterval(monitorInterval); 
monitorInterval = null; 
} 
} 
} 
} 

		
    • 
	


    
	
    
	使用setTimeout的小技巧
    

    
	 
    

    
	(1)IE中给setTimeout中的调用函数传参数
    
	上面的分析可知，IE是不支持在setTimeout中给被调用的函数传参数的，为了浏览器世界的和谐，我们可以把函数调用参数包裹进新的匿名函数中。示例：
    

    
	
    
	function f(a){
    
	alert(a);
    
	}
    
	// setTimeout(f,50,'hello'); //用于非IE
    
	setTimeout(function(){f('hello')},50); //通用
    
	var str='hello';
    
	setTimeout(function(){f(str)},50); //通用
    

    
	 
    

    
	(2)this问题
    
	setTimeout调用的函数被执行时的上下文是全局，而不再是调用setTimeout方法时的上下文。所以，setTimeout的第一个参数的函数被执行时其this是指向window的，如果需要保留调用setTimeout方法时的this，就需要把当时的this传进去。示例：
    

    
	
    
	function Person(name){
    
	this.name=name;
    
	var f=function(){alert('My name is '+this.name)};
    

    
	 
    

    
	// setTimeout(f,50); //错误
    
	
    
	var THIS=this;
    
	setTimeout(function(){f.apply(THIS)},50); //正确，通用
    
	setTimeout(function(){f.call(THIS)},50); //正确，通用
    
	}
    
	new Person('Jack');
    

    
	 
    
 
    
  
    标签：javascript setTimeout setIntelval   
    
 
    
 
    

    

    
              
  • 上一篇：.NET中pdb文件的作用
    •                 	  
			  
  • 下一篇：如何利用Email求职
    • 

  
     


    
  
    
      您可能感兴趣
    首页 编程学习 Web前端 数据库 软件设计
    开心学习 ©2013-2021 保留所有权利