现在的位置: 首页 > 综合 > 正文

JS setTimeout 和 setInterval 的区别小例子

2013年08月07日 ⁄ 综合 ⁄ 共 1583字 ⁄ 字号 评论关闭

 

这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript。不过两者各有各的应用场景。

 实际上,setTimeout和setInterval的语法相同。
它们都有两个参数,一个是将要执行的代码字符串,
还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码。

不过这两个函数还是有区别的,setInterval在执行完一次代码之后,

经过了那个固定的时间间隔,它还会自动重复执行代码,而setTimeout只执行一次那段代码。

 

下面我写了个控制浏览器转圈圈的效果,分别用了setTimeout和setInterval。你可以运行一下。



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>

 <body>
    
	<input type="button" onclick="beginnn()" value="我转圈圈,顺时针转圈圈,^v^" /><br>
	<input type="button" onclick="interbegin()" value="我转圈圈,逆时针转圈圈,^v^" /><br>
 </body>
</html>


<script>
  
var num=0;
function beginnn(){
     window.resizeTo(500, 450);
	 window.moveTo(20, 20);
	 setTimeout("two()",1000); 

//JS中setInterval、  setTimeout

}

function two(){
num++;
	 window.moveTo(300, 20);
	 setTimeout("three()",1000); 
  }
function three(){
num++;
	 window.moveTo(300, 300);
	 setTimeout("four()",1000); 
  }
function four(){
num++;
	 window.moveTo(20, 300);
	 setTimeout("back()",1000); 
  }
function back(){
num++;
	 window.moveTo(20, 20);
	 
	 if(num<8){
		 setTimeout("beginnn()",0); 
	 }else{
	   num=0;
	 }
}

var inum=0;
var ter=null;
function interbegin(){
     inum++;
     window.resizeTo(500, 450);
	 window.moveTo(20, 20);
	 ter=setInterval("myinter()",1000); 

}

function myinter(){
	if(inum<=8){
	       if(inum%4==0){
		       inum++;
			   window.moveTo(20, 20);
		   }else if(inum%4==1){
		       inum++;
			   window.moveTo(20, 300);
		   }else if(inum%4==2){
		       inum++;
			   window.moveTo(300, 300);
		   }else if(inum%4==3){
		       inum++;
			   window.moveTo(300, 20);
		   }else{
		       inum++;
			   window.moveTo(20, 20);
		   }
	}else{
	   window.clearInterval(ter);
	   inum=0;
	}
   

}
</script>


 

 

 

抱歉!评论已关闭.