JS中setTimeout()用法详解

SetTimeout setTimeout语法示例计数器cleartimeout setflag1。setTimeout()，它使用setTimeout重复执行函数，并设置条件停止setTimeout计分和计秒。1.1 SetTimeOut()语法示例1.2用SetTimeOut()执行函数1.3 SetTimeOut()语法示例1.4设置停止SetTimeOut()的条件1.5点零秒的计数器2。ClearTimeout()。set flag 10.1 settimeout()settimeout()是一个属于window的方法，但是我们都省略了window的顶层对象名，用来设置时间。时间到了，将执行指定的方法。请先看下面这个简单的例子，没有实际用途，只是用来演示setTimeout()的语法。1.settimeout()语法的示例练习-69 alert()，仅在等待三秒钟后执行，通常在第3章中用按钮调用。在本练习中，您将看到网页打开后三秒钟会自动出现一个警告对话框。1.请使用浏览器打开演示磁盘中的timeout1.htm，其中包含以下内容： htm body bgcolor=lightcyantext=redh 1 font color=blue演示网页/font /h1 p /brp请等待三秒钟！ScriptsetTimeout('alert('对不起，我需要你等很长时间')'，3000 )/script/body /html2。注意网页打开三秒后会出现一个提醒对话框。SetTimeout()是设置一个指定的等待时间(单位是千分之一秒，毫秒)。时间到了，浏览器将执行指定的方法或函数。下面的语法是： 。

这一次，浏览器将在等待3秒(3000毫秒)后执行alert()方法。2.使用setTimeout()执行函数setTimeout()通常与函数一起使用。下面是一个比前面练习更复杂的例子。练习-70文本在状态栏中自动消失在练习-20中，您已经看到了如何使用按钮在状态栏中显示文本，然后使用按钮擦除文本。在本练习中，您已经看到了如何使用按钮在状态栏中显示文本，并且该文本将在三秒钟后自动消失。1.请用浏览器打开演示磁盘中的timeout2.htm。文件包含以下内容： htm body bgcolor=light cyan text=red h1 font color=蓝色演示网页/font/h1p/brscript function clear word(){ window . status=' ' }/Scriptforminput type=' button ' value='显示文本' onclick=' window.status=' Hello '，settimeout ('clearword()'，3000)'/form/body/html2。请点击按钮，你应该会在状态栏看到hello这个词。注意三秒钟后，单词will。1.首先在这里设置一个名为clearWord()的函数，并做如下定义：window.status=' '。这用于擦除状态栏中的文本(请参见练习-20中的说明)。当浏览器执行clearWord()时，状态栏中的文本将被擦除。2.这一次，按钮被设置为启动以下两个任务，用隔开，浏览器将依次执行这两个任务： onclick=' window . status=' hello '，setTimeout ('clearword()'，3000)' 3。这次，settimeout()有以下设置： 。

它被设置为等待3秒(3000毫秒)让浏览器执行函数clearWord()。在第2章中，您已经看到了如何在父窗口打开时自动打开子窗口。如果查看器不关闭子窗口，子窗口将一直打开。看完上面的练习，请设计一个会打开一个子窗口的网页，这个子窗口打开两秒后会自动关闭。3.setTimeout() setTimeout()是重复执行的，默认情况下只执行一次，但是我们可以使用一个循环方法，这样当一个setTimeout()再次启动自身时，就会执行第二个setTimeout()，第二个就会启动第三个。如果这个循环继续下去，这个setTimeout()将被连续执行。练习-71每秒自动增加1的功能。在本练习中，您可以看到如何使用setTimeout()将文本框的值每秒增加1。当然也可以设置其他递增速度，比如每5秒递增5或者每5秒递增1。1.请用浏览器打开演示磁盘中的timeout3.htm。该文件包含以下内容： html head scriptx=0 function count second(){ x=x1document . FM . display box . value=xsettimeout(' count second()'，1000)}/script/head dy bgcolor=lightcyantext=red p/br formname=fminput type=' text ' name=' display box ' value=' 0 ' size=4/formscript count second()/script/body/html 2。网页打开后，请注意文本框中的数字变化。3.请将此文件复制到硬盘上，更改一些设置，比如x=x 5，或者将等待时间更改为5000，看看会发生什么。1.这个页面有两个脚本，第一个是设置countSecond()函数，第二个是在页面完全加载后启动这个函数。2.注意以下设置：函数countSecond(){ x=x1document . FM . display box . value=xsettimeout(' countsecond()'，1000)}启动countsecond()时，启动settimeout()，此方法启动countSecond()，count second()后，再启动SetTimeout()，因此结果是count second()每秒执行一次。3.在JavaScript中，我们使用这个方法来保持一些事情的进行，其中一个是显示旋转时间，另一个是设置运行文本，后面几章会有例子。通过上述方法设置时间。虽然setTimeout()设置为一秒，但是浏览器还有另外两个功能要执行，所以一个周期的时间略多于一秒。例如，一分钟内可能只有58个周期。4.设置条件使setTimeout()停止。setTimeout()的循环开始后，会不断重复。在上一个练习中，您看到文本框中的数字不断跳动，但是我们确实有方法在数字跳到某个值时停止。方法之一是用if设置条件.否则。如果为真，继续执行setTimeout()，如果为假，停止。例如，要使最后一个练习中的计数器在跳到20后停止，可以按如下方式更改相关功能。count second(){ if(x 20){ x=x1document . display sec . display box . value=Xsettimeout(' count second()'，1000)}} 5。用于计分和计秒的计数器在前面的练习中，我相信您已经学习了如何使用settimeout()。现在，请看看一个更详细的例子。练习-72计数器用于计时练习。您需要设置两个文本框，一个用于分钟，另一个用于秒钟。当网页打开时，它会在这两个文本框中自动计时。1.请用浏览器打开演示磁盘中的timeout4.htm。文件内容如下： html head scriptx=0y=-1 function count min(){ y=y1 document . display min . display box . value=ysettimeout(' count min()'，60000)} function count sec(){ x=x 1 z=x % 60 document . display sec . display box . value=z setTimeout(' count SeC()'，1000)}/script/head dy bgcolor=light cyantext=red p/br table tr valign=toptdyour

/TD/tr/tablescript count min()/count sec()/script/body/html 2。请注意两个文本框中的数字过渡。1.这个页面有两个功能，一个用于计数分钟，另一个用于计数秒钟。在这里，作者只演示了setTimeout()的操作，因为还有其他更简单的方法来编写计时器。(注意：的计时不准确。) 2.注意函数： function count sec(){ x=x1z=x % 60 document . display sec . display box . value=zsettimeout(' count sec()'，1000)}这里的%符号是modulus(余数)。例如，z=x% 60表示先执行x/60，得到的余数是变量z，例如82秒，模数是22，所以文本框将显示22而不是82。3.如果要在单元号前加0，如01、02、03等。可以使用以下方法： function count sec(){ x=x1z=x % 60if(z10){ z=' 0 ' z } document . display sec . display box . value=zsettimeout(' count sec()'，1000)}10.2 clearTimeout()在上一节中，您看到了如何使用settimeout()使浏览器不断地执行一个函数。当setTimeout()开始循环工作时，我们需要停止它，所以我们可以使用clearTimeout()的方法。ClearTimeout()有以下语法： clearTimeout(timeoutID)使用clearTimeout()。当我们设置settimeout()时，我们应该给这个setTimeout()一个名字，也就是timeoutID。当我们停下来的时候，我们用这个timeoutID来停止。这是一个自定义的名字，但是很多程序员都把timeoutID作为自己的名字。在下面的示例中，作者设置了两个名为meter1和meter2的timeoutid，如下所示： timeoutIDmeter1=settimeout(' count 1()'，1000) meter2=settimeout ('count2()'，1000)通过使用timeoutID名称meter 1和meter2，在设置clearTimeout()时，可以指定哪个settimeout()有效，而不会干扰另一个setTimeout()的操作。练习-73设置可以停止的输出()此练习基于练习-71，但做了两个更改。 (1)有两个SetTimeout()，而(2)有两个按钮来停止这两个SetTimeout()。1.请用浏览器打开演示磁盘中的clear.htm。该文件包含以下内容： html headscripttx=0y=0 function count 1(){ x=x1document . display 1 . box 1 . value=xmeter 1=setTimeout(' count 1()'，1000)} function count 2(){ y=y 1 document . display 2 . box 2 . value=y meter 2=setTimeout(' count 2()'，1000)}/script/headsdy bgcolor=lightcyantext=red p/Br表单名称=display1input type='输入类型=按钮值='继续计时' onClick='count1()'/表单名称=display 2 input type=' text ' name=' box 2 '值=' 0 ' size=4 input type=button value='停止计时' onClick='clearTimeout(meter2)。input type=button value=' continue to time ' onclick=' count 2()'/formscript count 1()count 2()/script/body/html 2。请注意网页中的两个文本框以及其中的数字变化。每个文本框旁边都有两个按钮。请试试两个按钮的反应。3.请连续按几次【继续计时】按钮，注意数值跳跃的加速度。原因是每按一次按钮，就启动一次函数，每个函数都会使值跳转。例如，如果你启动同一个函数四次，你将一秒钟跳四次。(见下一节)10.3设置标志前面的练习说我们用一个按钮来启动一个功能，每次按下都会启动一次。请看下面的例子。练习-74:重复设置Timeout()这个练习实际上是练习-73的简化，只有一个计时器。我想演示的是，每次我按下[继续计时]，功能count()就会启动一次。

1.请用浏览器打开演示磁盘中的flag1.htm。该文件包含以下内容： html headscriptx=0函数计数(){ x=x1document . display . box . value=xtimeoutid=settimeout(' count()'，1000)}/script/head body bgcolor=lightcyantext=red p/Br表单名称=display input type=' text ' name=' box ' value=' 0 ' size=4 input type=button value=' stop timing ' onclick=' clear time out(time outid)。input type=button value=' continue to time ' onclick=' count()'/formpscript count()/script/body/html 2。网页打开后，你应该会看到文本框中的数字跳转。请按【继续计时】四次，注意这样会加快跳号的速度，因为已经打开了几个相关的功能，每一个都会让数字发生变化。3.按下【继续计时】按钮四次后，请按下【停止计时】按钮，你会发现停止数字跳动需要五次。在编写程序时，我们经常要提防用户做出一些特殊的动作，比如用户按两次Continue Timer按钮，定时器就会不准确。我们有没有办法让一个按钮按一次就失效？这不会产生重复的效果。通过这个例子(后面有几个例子)，作者解释了程序中设置标志的概念，它是一个标记。一般来说，这可以是0或1(或开或关，或任意两个可选名称或数字)，但也可以是2、3、4或更多。在本例中，有以下设置：1。程序启动时，标志=。2.当执行counter()时，顺便说一下，标志将更改为1。3.在“继续计时”按钮的响应中，首先检查标志是0还是1。如果是0，会有影响；如果是1，它将没有响应。4.使用该标志模式，功能计数()开启后，按钮【继续计时】不起作用。这个标志是一个变量，可以随意命名。我们之所以用flag来调用这个变量，是因为这个变量有利于一个flag。如果旗帜是打开的，它会有一种效果，如果旗帜是关闭的，它会有另一种效果。练习-只能开启一次的75功能本练习是在上一个练习的基础上增加一个标志，这样一次只能执行一个count()功能。1.请用浏览器打开演示磁盘中的flag2.htm。该文件包含以下内容： html head scriptx=0 flag=0 function count(){ x=x1document . display . box . value=x timeoutid=settimeout(' count()'，1000)flag=1 } function restart(){ if(flag==0){ count()}/script/head body bgcolor=lightcyantext=red p/Br表单名称=display input type=' text ' name=' box ' value=' 0 ' size=4 input type=button value=' stop timing 'Flag=0 '输入类型=按钮值='继续计时' onclick=' restart()'/formpscriptcount()/Script formin put类型=按钮值=' show flag' onclick=' alert '(现在的标志是' flag ')/form/body/html 2。在网页中，您应该会看到三个按钮和文本框中的数字在跳动。3.请按下[显示标志]按钮，您应该会看到一条消息，指示标志为1。4.请按下[停止计时]按钮，数字将停止跳动。请按[显示标志]按钮，您应该会看到对话框中显示的标志为0。5.请按几次【继续计时】按钮，你应该会看到数字不会加速。请按下【显示标志】按钮，如果看到，框显示标志将变回1。1.这个网页的第四行有一句话： flag=0。这是为了设置变量标志并将初始值设置为0。您也可以将初始值设置为1，然后将相关的0和1反转。2.函数count()的最后一句是flag=1，所以当count()启动时，flag将变为1。3.[继续计时]按钮用于启动重启()。该函数有以下设置：函数restart () {if (flag==0) {count ()}。如果此处的语句检查标志是否等于0，如果等于0，则开始计数()。如果是1(即不是0)，就没有响应。使用这种方法，如果count()已经在运行，按钮“继续计时”将不起作用。

这个地方的flag=1设置实际上是设置为1或者2或者3，只要不是0，都是一样的。因此，这两个相对标志看起来是“0”和“1”，但实际上是“0”和“非零”(非0)。4.[停止计时]按钮设置如下： onclick=' clear time out(time out id)；“标志=0”这是为了停止setTimeout()的操作，同时将标志转回0，使restart()函数重新启动计数()。