JavaScript中的Timer是怎么工作的

一、JavaScript中的Timer是怎么工作的

通常它们的表现行为并不是那么地直观，而这是因为它们都处在一个单一线程中。让我们先来看一看三个用来创建以及操作timer的函数。 var id= setTimeout(fn, delay);-初始化一个单一的timer，这个timer将会在一定延时后去调用指定的函数。这个函数（setTimeout）将返回一个唯一的ID，我们可以通过这个ID来取消timer。 var id= setInterval(fn, delay);-与setTimeout类似，只不过它会持续地调用指定的函数（每次都有一个延时），直到timer被取消为止。 clearInterval(id);, clearTimeout(id);-接受一个timer的ID（由上述的两个函数返回的），并且停止timer的回调事件。（点击查看大图）由于JavaScript向来都只能在同一时间执行一块代码（这是由它单线程的本质决定的），所以每一个代码块都阻塞了其他的异步事件。这意味着当异步事件发生时（比如鼠标点击、timer触发或者是XMLHttpRequest完成），这些事件将进入到一个队列中等待执行（队列的实现方法因浏览器而异，我们在此只讨论一个简化的情况）。刚开始，在第一个JavaScript块中，有两个timer被初始化了：一个10ms的setTimeout和一个是10ms的setInterval。由于timer（这里的timer指setTimeout中的timer，而下文中的interval则指setInvertal中的timer）开始的时间，实际上它在第一个代码块结束前就已经触发了。然而请注意，它并不会马上执行（事实上由于单线程的存在，它也无法做到马上执行）。相反的，这个被延期执行的函数进入队列中，等待在空闲的时候被执行。当第一个JavaScript块被执行完之后，浏览器问了一个问题：有正在等待被执行的代码吗？在这个例子中，鼠标点击事件和time事件都正在队列中等待。于是浏览器选了一个（鼠标点击事件），然后马上执行它。而timer只能继续等下去。注意当鼠标点击事件正在执行的时候第一次的interval事件也触发了，与timer一样，它的事件也进入队列等待之后执行。然而，注意，当interval再次触发的时候（这个时候timer的事件正在执行），这一次它的事件被丢弃了。如果你在一个大的JavaScript代码块正在执行的时候把所有的interval回调函数都囤起来的话，其结果就是在JavaScript代码块执行完了之后会有一堆的interval事件被执行，而执行过程中不会有间隔。因此，取代的作法是浏览器情愿先等一等，以确保在一个interval进入队列的时候队列中没有别的interval。让我们来看一个例子，这个例子更好地阐释了setTimeout和setInveral之间的区别。 setTimeout(function(){/*一个很长的代码块*/setTimeout(arguments. callee,10);},10);我们在此学到了很多，让我们重述一下： JavaScript引擎只有一个线程，这使得异步事件必需列队等待执行。 setTimeout和如果一个timer在将要执行的时候被阻塞，它将会等待下一个时机（比预期的延时要长）。

二、JavaScript定时器详解

1、在javascritp中有两个关于定时器的专用函数它们是

2、倒计定时器 timename=setTimeout("function();" delaytime);

3、循环定时器 timename=setInterval("function();" delaytime);

4、 function()是定时器触发时要执行的是事件的函数可以是一个函数也可以是几个函数或者javascript的语句也可以单要用;隔开 delaytime则是间隔的时间以毫秒为单位

5、倒计时定时器就是在指定时间后触发事件而循环定时器就是在间隔时间到来时反复触发事件其区别在于前者只是作用一次而后者则不停地作用

6、倒计时定时器一般用于页面上只需要触发一次的的情况比如点击某按钮后页面在一定时间后跳转到相应的站点也可以用于判断一个浏览者是不是你的站点上的“老客”如果不是你就可以在秒或者秒后跳转到相应的站点然后告诉他以后再来可以在某个地方按某一个按钮就可以快速进入

7、循环定时器一般用于站点上需要从复执行的效果比如一个javascript的滚动条或者状态栏也可以用于将页面的背景用飞雪的图片来表示这些事件需要隔一段时间运行一次

8、有时候我们也想去掉一些加上的定时器此时可以用clearTimeout(timename)来关闭倒计时定时器而用clearInterval(timename)来关闭循环定时器

9、例<SCRIPT LANGUAGE="JavaScript"> setTimeout("confirm()");</SCRIPT>

10、<script language="JavaScript" type=text/javascript>

11、 function count(){ setTimeout("alert(三秒到了)")}

12、<INPUT TYPE="button" VALUE="计时开始" onClick="count()">

13、例<Script><script language="JavaScript" type=text/javascript>

14、 var sec=; timerID= setInterval("count()");

15、 function count(){ num innerHTML= sec++;}

16、停留时间<FONT ID="num" FACE="impact"></FONT>秒钟<INPUT TYPE="button" VALUE="停止" onClick="clearInterval(timerID)">

17、例<script language="JavaScript" type=text/javascript>

18、 var str="这是一个在线拍卖的网站请尽情血拼吧！"; var seq=;

19、 function scroll(){ msg= str substring( seq+); banner innerHTML= msg; seq++; if(seq>= str length) seq=;}

三、在javascript中setInerval和setTimrout的区别是什么

1、window对象有两个主要的定时方法，分别是setTimeout和 setInteval他们的语法基本上相同，但是完成的功能取有区别。

2、setTimeout方法是定时程序，也就是在什么时间以后干什么。干完了就拉倒。

3、setInterval方法则是表示间隔一定时间反复执行某操作。

4、如果用setTimeout实现setInerval的功能，就需要在执行的程序中再定时调用自己才行。如果要清除计数器需要根据使用的方法不同，调用不同的清除方法：

5、例如：tttt=setTimeout('northsnow()',1000);

6、tttt=setInterval('northsnow()',1000);

7、<div id="liujincai"></div>

8、<input type="button" name="start" value="start" onclick='startShow();'>

9、<input type="button" name="stop" value="stop" onclick="stop();">

10、<script language="javascript">

11、 liujincai.innerHTML=liujincai.innerHTML+""+(intvalue++).toString();

12、 timer2=window.setTimeout("startShow()",2000);

13、<div id="liujincai"></div>

14、<input type="button" name="start" value="start" onclick='timer2=window.setInterval("startShow()",2000);//startShow();'>

15、<input type="button" name="stop" value="stop" onclick="stop();">

16、<script language="javascript">

17、 liujincai.innerHTML=liujincai.innerHTML+""+(intvalue++).toString();

18、 window.clearInterval(timer2);