JavaScript setInterval和clearInterval 定时器

最新推荐文章于 2023-04-10 14:14:18 发布

闲情赋

最新推荐文章于 2023-04-10 14:14:18 发布

阅读量1k

点赞数

分类专栏： JS 文章标签： javascript

JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

时间间隔可以用 setInterval 命令来创建并用 clearInterval 命令来终止。setInterval 所用的参数有两种格式。在第一种格式中，你传递给 setInterval 的参数可以是一个函数名，一段时间上的间隔以及一些传递给前面函数的相关参数。当 setInterval 运行时它会依照规定的时间间隔依次将列出的参数传递给指定的函数，直到你调用 clearInterval 将其终止。相关的示范代码如下：

function updateStockPrices(whichStock) { 
        // Update code here 
        trace('Updating prices for '+whichStock); 
} 
stockInterval = setInterval(updateStockPrices, 1000, "Stratford Flash Products");

setInterval全面的介绍

setInterval动作的作用是在播放动画的时，每隔一定时间就调用函数，方法或对象。可以使用本动作更新来自数据库的变量或更新时间显示。setInterval动作的语法格式如下：

setInterval(function,interval[,arg1,arg2,......argn]) 
setInterval(object,methodName,interval[,arg1,arg2,.....argn])

第一种格式是标准动作面板中setInterval函数的默认语法，第二种格式是在专家模式动作中使用的方法。

其中的参数function是一个函数名或者一个对匿名函数的引用。object参数指定从Object对象派生的对象。methodName制定object参数中要调用的方法。interval制定对function或methodName调用两次之间的时间，单位是毫秒。后面的arg1等是可选的参数，用于制定传递给function或是methodName的参数。

setInterval它设置的时间间隔小于动画帧速（如每秒10帧，相当于100毫秒），则按照尽可能接近interval的时间间隔调用函数。而且必须使用updateAfterEvent动作来确保以足够的频率刷新屏幕。如果interval大于动画帧速，则只用在每次播放头进入某一帧是才调用，以减小每次刷新屏幕的影响。

下面的例子每隔1秒调用一次匿名函数。

setInterval(function(){trace("每隔1秒钟我就会显示一次")},1000);//这里的function(){}是没有函数名 
的函数。成为匿名函数，后面的1000是时间间隔，单位是毫秒。

下面的例子为我们展示如何带参数运行。

function show1(){ 
trace("每隔1秒我就会显示一次"); 
} 
function show2(str){ 
trace(str); 
} 
setInterval(show1,1000); 
setInterval(show2,2000,"每隔2秒我就会显示一次");

上面已经将函数的setInterval方法介绍了。
下面我们将介绍对象的setInterval方法。
首先，写一个setInterval在动作中调用对象的方法的例子，该例子不需要传递参数。

myobj=new Object();//创建一个新的对象 
myobj.interval=function){ 
trace("每隔1秒我就会显示一次"); 
}//创建对象的方法。 
setInterval(myobj,"interval",1000);//设定时间间隔调用对象的方法。

接下来介绍如何传递参数。其实道理和函数的传递参数是一样的。

myobj=new Object(); 
myobj.interval-function(str){ 
trace(str); 
} 
setInterval(myobj,"interval",2000," 每隔2秒我就会显示一次");

注意。要调用为对象定义的方法时，必须在专家模式中使用第二种语法格式。
这样子的话呢，我们来作一个动态显示时间的画面。可以用下面的代码实现。

setInterval(show,1000); 
function show(){ 
time=new Date(); 
hour=time.getHours(); 
minu=time.getMinutes(); 
sec=time.get.Seconds(); 
datetime=hour ":" minu ":" sec; 
}//这里的datetime是一个动态文本框的变量名字。

这样子呢，setInterval这个方法大家应该学的很好了。现在呢，我们学习clearInterval.
clearInterval动作的作用是清楚对setInterval函数的调用，它的语法格式如下clearInterval(intervalid);intervalid是调用setInterval函数后返回的对象。

下面举一个简单的例子。

function show(){ 
trace("每隔一秒我就会显示一次"); 
} 
var sh; 
sh=setInterval(show,1000); 
clearInterval(sh);

倒计时实例（将下面代码复制到html文件，用浏览器打开可查看效果）

<pre name="code" class="html"><!DOCTYPE html>
<html>
<head>
<meta charset="gbk"> 
<title>倒计时</title> 
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
function sendCode(){
	var time = 59;
	var caseCodeVal = $("#codeTime");
	caseCodeVal.html("<font color=red> " + time + " 秒 </font>后重发");
	timer = setInterval(function(){
		time--;
		caseCodeVal.html("<font color=red> " + time + " 秒 </font>后重发");
		if(time == 0){
			clearInterval(timer);
			caseCodeVal.html("获取验证码");
			timer = null;
		}
	},1000);
}
</script>
</head>
<body>
<div><a href="javascript:void(0)" class="blue" id="codeTime" οnclick="sendCode();">获取验证码</a></div>
</body>
</html>