setTimeout,setInterval的使用和区别

setTimeout,setInterval的使用和区别

 

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

方 法

 

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

 

不过这两个函数还是有区别的

 

setInterval在执行完一次代码之后,经过了那个固定的时间间隔,它还会自动重复执行代码

 

setTimeout只执行一次那段代码。

 

虽然表面上看来setTimeout只能应用在on-off方式的动作上,不过可以通过创建一个函数循环重复调用setTimeout,以实现重复的操作:

 

File:settimeout_setinterval.js

Js代码 

showTime(); 

 

functionshowTime() 

 

 

    var today = new Date(); 

 

    alert("The time is: " +today.toString()); 

 

    setTimeout("showTime()",5000); 

 

 

 

 

一旦调用了这个函数,那么就会每隔5秒钟就显示一次时间。如果使用setInterval,则相应的代码如下所示:

 

File:settimeout_setinterval2.js

Js代码 

setInterval("showTime()",5000); 

 

functionshowTime() 

 

 

    var today = new Date(); 

 

    alert("The time is: " +today.toString()); 

 

 

 

 

这两种方法可能看起来非常像,而且显示的结果也会很相似,不过两者的最大区别就是,setTimeout方法不会每隔5秒钟就执行一次showTime函数,它是在每次调用setTimeout后过5秒钟再去执行showTime函数。这意味着如果showTime函数的主体部分需要2秒钟执行完,那么整个函数则要每7秒钟才执行一次。而setInterval却没有被自己所调用的函数所束缚,它只是简单地每隔一定时间就重复执行一次那个函数。

 

如果要求在每隔一个固定的时间间隔后就精确地执行某动作,那么最好使用setInterval,而如果不想由于连续调用产生互相干扰的问题,尤其是每次函数的调用需要繁重的计算以及很长的处理时间,那么最好使用setTimeout。

 

函数指针的使用

 

两个计时函数中的第一个参数是一段代码的字符串,其实该参数也可以是一个函数指针,不过Mac下的IE 5对此不支持。

 

如果用函数指针作为setTimeout和setInterval函数的第二个参数,那么它们就可以去执行一个在别处定义的函数了:

Js代码 

setTimeout(showTime,500); 

 

functionshowTime() 

 

 

    var today = new Date(); 

 

    alert("The time is: " +today.toString()); 

 

 

另外,匿名函数还可以声明为内联函数: 

  

setTimeout(function(){vartoday = new Date();

     alert("The time is: " +today.toString());}, 500);

 

讨 论

 

如果对计时函数不加以处理,那么setInterval将会持续执行相同的代码,一直到浏览器窗口关闭,或者用户转到了另外一个页面为止。不过还是有办法可以终止setTimeout和setInterval函数的执行。

 

当setInterval调用执行完毕时,它将返回一个timer ID,将来便可以利用该值对计时器进行访问,如果将该ID传递给clearInterval,便可以终止那段被调用的过程代码的执行了,具体实现如下:

 

File:settimeout_setinterval3.js (excerpt)

Js代码 

varintervalProcess = setInterval("alert('GOAL!')", 3000); 

 

 

 

var stopGoalLink =document.getElementById("stopGoalLink"); 

 

attachEventListener(stopGoalLink,"click", stopGoal, false); 

 

 

 

functionstopGoal() 

 

 

    clearInterval(intervalProcess); 

 

 

只要点击了stopGoalLink,不管是什么时候点击,intervalProcess都会被取消掉,以后都不会再继续反复执行intervalProcess。如果在超时时间段内就取消setTimeout,那么这种终止效果也可以在setTimeout身上实现,具体实现如下:

 

File:settimeout_setinterval4.js (excerpt)

Js代码 

var timeoutProcess= setTimeout("alert('GOAL!')", 3000); 

 

 

 

var stopGoalLink =document.getElementById("stopGoalLink"); 

 

attachEventListener(stopGoalLink,"click", stopGoal, false); 

 

 

 

functionstopGoal() 

 

 

    clearTimeout(timeoutProcess); 

 

 

 

 

------------------------------------------------------------------------------------------------

 

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是时间间隔,单位是毫秒。

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

Js代码 

functionshow1(){ 

   trace("每隔1秒我就会显示一次"); 

functionshow2(str){ 

   trace(str); 

setInterval(show1,1000); 

setInterval(show2,2000,"每隔2秒我就会显示一次"); 

 

上面已经将函数的setInterval方法介绍了。

下面我们将介绍对象的setInterval方法。

首先,写一个setInterval在动作中调用对象的方法的例子,该例子不需要传递参数。

Js代码 

myobj=newObject();//创建一个新的对象 

myobj.interval=function){ 

   trace("每隔1秒我就会显示一次"); 

}//创建对象的方法。 

setInterval(myobj,"interval",1000);//设定时间间隔调用对象的方法。 

 

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

 

myobj=newObject(); 

myobj.interval-function(str){ 

   trace(str); 

setInterval(myobj,"interval",2000,"每隔2秒我就会显示一次"); 

 

注意。要调用为对象定义的方法时,必须在专家模式中使用第二种语法格式。

这样子的话呢,我们来作一个动态显示时间的画面。可以用下面的代码实现。

Js代码 

setInterval(show,1000); 

functionshow(){ 

   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函数后返回的对象。

下面举一个简单的例子。

Js代码 

functionshow(){ 

   trace("每隔一秒我就会显示一次"); 

var sh; 

sh=setInterval(show,1000); 

clearInterval(sh); 

 

setInterval很不错,可以完全代替onEnterFrame,但是使用起来却有很多需要注意的地方

 

比如要用updateAfterEvent,强制刷屏

还有要记得用clearInterval(id);来停止掉setInterval,如果要在停止的地方忘记地址了,那是很恐怖的^^"

 

但是要当程序一大,到处都是setInterval的时候(当然这样的程序也不好),你会为了找setInterval的id在哪里..而忙呼

 

注意过id的人都知道id是一个number,在你调用setInterval的时候会返回一个number,而这个number会逐加,很像addListener中的_listener数组的length

 

那么一个停掉所有setInterval的笨办法

Js代码 

MAX = 1000;  

for(vari=0;i<MAX;i++){  

clearInterval(i);  

 

定义一个足够大的数字,然后慢慢clear,这么做就可以停止掉所有的setInterval了,当然如果你使用了超过1000个不同的setInterval(- -||)那还会出掉问题

所以最好的办法

Js代码 

var tmpID:Number =setInterval(function(){},10);  

while(--tmpID >0)  

clearInterval(tmpID); 

先用setInterval建立一个空函数,这样tmpID就会得到一个目前所拥有的setInterval的个数,然后用while循环一次性搞定就可以了^^"

简单吧,这样,你在哪里用过setInterval都不要紧,因为我想flash内置的setInterval函数,一定有一个类似addListener中的_listener的数组,然后返回数组的长度

那么强化一下clearAll()方法

Js代码 

functionclearAll(Void):Void {  

// others clearstatement  

var tmpId:Number =setInterval(function () {}, 10);  

while(--tmpId>0) clearInterval(tmpId);  

}  

  

// 测试程序  

functionA(){trace("A");}  

functionB(){trace("B");}  

functionC(){trace("C");}  

setInterval(A,50);  

setInterval(B,50);  

setInterval(C,50);  

 

setInterval(clearAll,1000);  

 

functionclearAll(Void):Void {  

var tmpId:Number =setInterval(function () {}, 10);  

while(--tmpId>0) clearInterval(tmpId);  

}

来自网络,如有侵权,请和我联系,我及时删除,谢谢

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值