一、怎么js中settimeout
etTimeout()是属於 window的 method,但我们都是略去 window这顶层物件名称,这是用来设定一个时间,时间到了,就会执行一个指定的 method。请先看以下一个简单,这是没有实际用途的例子,只是用来示范 setTimeout()的语法。
练习-69等候三秒才执行的 alert()
在第 3章说到 alert对话盒,一般是用按钮叫出来,在这练习,你会看到网页开启後 3秒,就会自动出现一个 alert对话盒。
1.请用浏览器开启示范磁碟中的 timeout1.htm,这档案有以下内容:
<html><body bgcolor=lightcyan text=red><h1><font color=blue>示范网页</font></h1><p></br><p>请等三秒!<script> setTimeout("alert('对不起,要你久候')", 3000)</script></body></html>
2.留意网页开启後三秒,就会出现一个 alert对话盒。
etTimeout()是设定一个指定等候时间(单位是千分之一秒, millisecond),时间到了,浏览器就会执行一个指定的 method或 function,有以下语法:
今次例子是设定等 3秒(3000 milliseconds),浏览器就会执行 alert()这一个method。
etTimeout()通常是与 function一起使用,以下是一个较上个练习复杂的例子。
在练习-20,你看过如何用按钮在状态列显示文字,然後再用按钮消除文字,在这练习,你看到如何用按钮在状态列显示文字,而这文字会在三秒後自动消失。
1.请用浏览器开启示范磁碟中的 timeout2.htm,这档案有以下内容:
<html><body bgcolor=lightcyan text=red><h1><font color=blue>示范网页</font></h1><p></br>
<script> function clearWord(){window.status=""}</script><form><input type="button" value="在状态列显示文字" onClick="window.status='Hello', setTimeout('clearWord()', 3000)"></form></body></html>
2.请在按钮上按一下,你应见到状态列出现 Hello这字,留意过了三秒,这字就会消失。
1.这处先设定一个名为 clearWord()的 function,作以下定义:
这是用来消除状态列的文字(请看练习-20的说明),浏览器执行 clearWord(),就会消除状态列的文字。
2.今次按钮设定了启动以下两项工作,用，分隔,浏览器会顺序执行这两项工作:
onClick="window.status='Hello', setTimeout('clearWord()', 3000)"
3.今次的 setTimeout()有以下设定:
这是设定等 3秒(3000 milliseconds)浏览器就会执行 clearWord()这一个function。
在第 2章,你看过如何使到父视窗开启时自动开启一个子视窗,若观看者不关闭这子视窗,这子视窗就会一路开启。看过以上的练习,请你设计一个会开启子视窗的网页,而这子视窗在开启後两秒,就会自动关闭。
etTimeout()预设只是执行一次,但我们可以使用一个循环方式,使到一个setTimeout()再启动自己一次,就会使到第二个 setTimeout()执行,第二个又启动第三个,这样循环下去,这 setTimeout()就会不断执行。
在这练习,你看到如何使用 setTimeout()令文字框的数值每秒就加 1,当然你也可以设定其他递增的速度,例如每五秒就加 5,或每五秒就加 1。
1.请用浏览器开启示范磁碟中的 timeout3.htm,这档案有以下内容:
2.网页开启後,请你留意文字框中的数值转变。
3.请你将这档案复制去硬碟,更改一些设定,例如 x= x+5,或将等候时间改为5000,看有什麼反应。
1.这网页有两个 script,第一个是设定 countSecond()这个 function,第二个在後的是在网页完全载入後,就启动这 function。
当 countSecond()启动後,就会启动 setTimeout(),这个 method在一秒後又启动 countSecond(), countSecond()启动後又启动 setTimeout(),所以得出的结果是 countSecond()每秒执行一次。
3.在 JavaScript,我们是使用这处说的方法使到一些事项不断执行,其中一个用途是显示转动时间,另一个用途是设定跑动文字,随後的章节会有例子。
用上述的方法设定时间, setTimeout()虽然设定了是一秒,但浏览器还有另外两项功能要执行,所以一个循环的时间是稍多於一秒,例如一分钟可能只有58个循环。
etTimeout()的回圈开始後,就会不断重复,在上个练习,你看到文字框的数字不断跳动,但我们是有方法使到数字跳到某一个数值就停下来,其中一个方法是用 if...else设定一个条件,若是 TRUE就继续执行 setTimeout(),若是 FALSE就停止。
例如要使到上个练习的 counter跳到 20就停下,可将有关的 function作以下的更改。
在前面的练习,相信你已学识如何使用 setTimeout(),现在请你看一个较复习的例子。
在这练习,你要设定两个文字框,一个显示分钟,另一个显示秒,网页开启後,就会在这两个文字框中自动计时。
1.请用浏览器开启示范磁碟中的 timeout4.htm,这档案有以下内容:
<html><head><script> x=0 y=-1 function countMin(){y=y+1 document.displayMin.displayBox.value=y setTimeout("countMin()",60000)}
2.请你留意两个文字框中的数字转变。
1.这网页有两个 function,一个用来计分钟,一个用来计秒。在这处,笔者只是示范setTimeout()的操作,因为计时器有其他更精简的写法。(留意:这方式的计时并不准确。)
这处的%符号是 modulus(馀数),例如 z= x% 60表示先进行 x/ 60,得出的馀数作为 z这变数,例如 82秒, modulus就是 22,所以文字框会显示 22而不是 82。
3.若你要将单位数字在前加上 0,例如 01, 02, 03等,可用以下方法:
在前一节,你看过如何使用 setTimeout()来使到浏览器不断执行一个 function,当一个 setTimeout()开始了循环的工作,我们要使它停下来,可使用 clearTimeout()这 method。
clearTimout()有以下语法:clearTimeout(timeoutID)
要使用 clearTimeout(),我们设定 setTimeout()时,要给予这 setTimout()一个名称,这名称就是 timeoutID,我们叫停时,就是用这 timeoutID来叫停,这是一个自订名称,但很多程式员就以 timeoutID为名。
在下面的例子,笔者设定两个 timeoutID,分别命名为 meter1及 meter2,如下:
timeoutID↓ meter1= setTimeout("count1()", 1000) meter2= setTimeout("count2()", 1000)
使用这 meter1及 meter2这些 timeoutID名称,在设定 clearTimeout()时,就可指定对哪一个 setTimeout()有效,不会扰及另一个 setTimeout()的操作。
这练习以练习-71为蓝本,但作了两个改变:(1)有两个 setTimeout(),(2)有两个按钮,分别可停止这两个 setTimout()。
1.请用浏览器开启示范磁碟中的 clear.htm,这档案有以下内容:
<html><head><script> x= 0 y= 0
2.留意网页中的两个文字框及内里变动的数字,每个文字框旁有两个按钮,请你试试两个按钮的反应。
3.请你连续按多次[继续计时]的按钮,留意数值的跳动加快了,原因是每按一次就启动 function一次,每个 function都令数值跳动,例如启动同一的 function四次,就会一秒跳四次。(请看下一节)
前个练习说到我们用一个按钮来启动一个 function,每按一下就会启动这 function一次,请看以下例子。
练习-74效果重复的 setTimeout()
这练习实际是将练习-73简化,只有一个计时器,笔者想示范的是每按[继续计时]一次,就会启动 count()这 function一次。
1.请用浏览器开启示范磁碟中的 flag1.htm,这档案有以下内容:
<script> count()</script></body></html>
2.网页开启後,你应见到文字框中的数字跳动,请你按四次[继续计时],留意这会加快数字跳动,原因是有关的 function被开启了多个,每个都会使数字转变。
3.按了四次[继续计时]的按钮後,请你按[停止计时]的按钮,你会发现要按五次才能停止数字跳动。
在编写程式时,我们常要提防使用者作出一些特别动作,例如使用者按两次[继续计时]按钮,这计时器就失准了。我们是否有办法使到一个按钮被按一次就失效呢?这就不会产生重复效果。
笔者藉这处的例子(随後还有多个例子),解说程式中一个 set flag(设定旗标)的概念, flag是一个记认,一般来说,这可以是 0或是 1(也可用 on或 off,或任何两个自选的名称或数字),但也可以是 2、3、4或更大的数字,在这例子有以下设定:
2.当 counter()执行时会顺便将 flag变为 1。
3.在[继续计时]这按钮的反应中,会先检查 flag是 0或是 1,若是 0就会产生作用,若是 1就没有反应。
4.使用这 flag的方式, count()这 function开启後,[继续计时]这按钮就没有作用。
这处的 flag是一个变数,可任意取名,我们用 flag来称呼这变数的原因,是因为这变数好处一支旗,将旗竖起(flag is on),就会产生一个作用,将旗放下(flag is off),就产生另一个作用。
这练习是将上个练习加多一个 flag,使到每次只能有一个 count()这 function在进行。
1.请用浏览器开启示范磁碟中的 flag2.htm,这档案有以下内容:
function restart(){if(flag==0){count()}}</script></head>
<script> count()</script>
<form><input type=button value="Show flag" onClick="alert('The flag now is'+ flag)"></form></body></html>
2.在网页中,你应见到三个按钮及文字框中的数字跳动。
3.请你按[Show flag]这按钮,应见到一个话对盒显示 flag是 1。
4.请你按[停止计时]这按钮,数字停止跳动,请你按[Show flag]这按钮,应见到话对盒显示 flag是 0。
5.请你按多次[继续计时]这按钮,你应见到数字不会加快,请你按[Show flag]这按钮,应见到话对盒显示 flag变回 1。
1.这网页第 4行有这一句: flag=0,这是设定 flag这变数及将初始值定为 0,你也可将初始值定为 1,随後有关的 0和 1对调。
2.count()这 function最後一句是 flag=1,所以启动 count()後, flag就会变为 1。
3.[继续计时]的按钮是用来启动 restart(),这 function有以下设定:
function restart(){if(flag==0){count()}}
这处的 if statement检查 flag是否等於 0,若是 0就启动 count(),若是 1(即不是 0)就没有反应,使用这方法,若 count()已在执行中,[继续计时]这按钮不会有作用。
这处的 flag=1设定,实际设为 1或 2或 3等数值都是一样的,只要不是 0就可以了,所以这两个相对的旗标,看似是"0"和"1",实际是"0"和"non-zero"(非-0)。
onClick="clearTimeout(timeoutID); flag=0"
这是停止 setTimeout()的操作时,同时将 flag转回 0,这使到 restart()这 function可以重新启动 count()。
二、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在将要执行的时候被阻塞，它将会等待下一个时机（比预期的延时要长）。
cleartimeout的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于cleartimeout不生效、cleartimeout的信息别忘了在本站进行查找哦。
