JS setTimeout 和 setInterval 的区别小例子

最新推荐文章于 2024-08-04 16:33:59 发布

索隆

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量78

点赞数

文章标签： javascript ViewUI

这两个方法都可以用来实现在一个固定时间段之后去执行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" οnclick="beginnn()" value="我转圈圈，顺时针转圈圈，^v^" /><br>
	<input type="button" οnclick="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>

索隆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS setTimeout 和 setInterval 的区别小例子

这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript。不过两者各有各的应用场景。实际上，setTimeout和setInterval的语法相同。它们都有两个参数，一个是将要执行的代码字符串，还有一个是以毫秒为单位的时间间隔，当过了那个时间段之后就将执行那段代码。不过这两个函数还是有区别的，setInterval在执行完一次代码之后，经过了那个固定的时间间隔...
复制链接

扫一扫