zoukankan      html  css  js  c++  java
  • Javascript中setTimeout()的用法详解

    1、SetTimeOut()

          1.1 SetTimeOut()语法例子

          1.2 用SetTimeOut()执行Function

          1.3 SetTimeout()语法例子

          1.4 设定条件使SetTimeout()停止

          1.5 计分及秒的counter

    2、ClearTimeout()

    3、Set Flag


    10.1  setTimeout()

        setTimeout()是属于window的method,但我们都是略去window这顶物件名称,这是用来设定ige时间,时间到了,就会执行一个指定的method。请先看以下一个简单,这是没有实际用途的例子,只是用来示范setTimeout()的语法。

      1. setTimeout()语法例子

       练习1    等候三秒才执行的 alert()

       在第三章 说到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对话盒

        setTimeout()是设定一个指定等候时间(单位是千分之一秒,millisecond),时间到了,浏览器就会执行一个指定的method或function,有以下语法:

         

    今次例子是设定等3秒(3000 milliseconds),浏览器就会执行 alert()这一个method。

    2.用 setTimeout()来执行 function

       setTimeout() 通常是与function 一起使用,以下是一个较上个练习复杂的例子。

    练习  状态列中自动消失的文字

       在练习,你看过如何用按钮在状态列显示文字,然后再用按钮消除文字,在这练习,你看到如何用按钮在状态列显示文字,而这文字会再三秒后自动消失。

    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。作以下定义:

         window.status=""

          这是用来消除状态列的文字,浏览器执行clearword(),就会消除状态列的文字

    2、今次按钮设定了启动以下两项工作,用 ,分隔,浏览器会顺序执行这两项工作

         onClick="window.status='hello',setTimeout('clearword()',3000)"

    3、今次的setTimeout()有以下设定:

          

          这是设定第3秒(3000 milliseconds)浏览器就会执行clearword()这一个function.

    在第二章,你看过如何使到父视窗开启时自动开启一个子视窗,若观看者不关闭这子视窗,这子视窗就会一路开启,看过以上的练习,请你设计一个会开启子视窗的网页,而这子视窗在开启后两秒,就会自动关闭。

    3.  不断重复执行的 setTimeout()

       setTimeout()预设只是执行一次,但我们可以使用一个循环方式,使到一个setTimeout()再启动自己一次,就会使到第二个setTimeout()执行,第二个又启动第三个,这样循环下去,这setTimeout()就会不断执行。

     

    自动每秒加1的function

        在这练习,你看到如何使用setTimeout(),令文字框的数值每秒加 1,当然你也可以设定其他递增的速度,例如每秒就加5,或者每五秒就加1.

       1、请用浏览器开启示范磁碟中 timeout3.htm, 這檔案有以下內容:

    <html> <head>
    <script>
    x = 
    0
    function 
    countSecond( )
    { x = x+1
      document.fm.
    displayBox.value=x
      setTimeout("
    countSecond( )", 1000)
    }
    </script> </head>
    <body bgcolor=lightcyan text=red> <p> </br>

    <form name=
    fm>
    <input type="text" name="
    displayBox" value="0" size=4 >
    </form>

    <script>
    countSecond( )
    </script>

    </body> </html>

    2、网页开启后,请你留意文字框中的数值转变

     

    1、这网页有两个script,第一个是设定countSecond()这个function。第二个在后的是在网页完成载入后,就启动这function

    2、留意今次以下的设定:

    function countSecond( )
    { 
    x = x+1
      document.
    fm.displayBox.value = x
      setTimeout("
    countSecond( )", 1000)
    }

    当countSecond()启动后,就会启动setTimeout(),这个method在一秒后又启动countSecond(),countSecond()启动后又启动setTimenout(),所以得出的结果是countSecond()每秒执行一次,

    3、在javascript,我们是使用这虚说的方法使到一些事项不断执行,其中一个用途是显示转动时间,另一个用途是设定跑动文字,随后的章节会有例子。

         用上述的方法设定时间,setTimeout()虽然设定了一秒,但浏览器还有另外两项功能要执行,所以一个循环的时间是稍多于一秒,例如一分钟可能只有58个循环。

    4、设定条件使setTimeout()停止

       setTimeout()的回圈开始后,就会不断重复,在上个练习,你看到文字框的数字不断跳动,但我们是有方法使到数字跳到某一个数值停下来,其中一个方法是用if....else设定一个I额条件,若是true就继续执行setTimeout(),若是falsh就停止

        例如要使到上个练习的counter跳到20就停下,可将有关的function作以下的更改。

    function countSecond( )
    { if ( 
    x < 20 )
       { 
    x = 1
         document.
    displaySec.displayBox.value = x
         setTimeout("
    countSecond( )", 1000)
          }
    }

     

    5、计分及计秒的counter

       在前面的练习,相信你已学会如何使用setTimeout(),现在请你看一个较复杂的例子

        练习 计时的counter

      在这个练习,你要设定两个文字框,一个现实分钟,另一个示秒,网页开启后,就会再这两个文字框中自动计时。

    1. 请用浏览器开启磁碟中 timeout4.htm, 這檔案有以下內容:

    <html> <head>
    <script>
    x=
    0
    y=-
    1

    function countMin( )
    { y=y+
    1
      document.displayMin.displayBox.value=y
      setTimeout("countMin( )",60000)
    }

    function countSec( )
    { 
    1
      =
    60
      document.
    displaySec.displayBox.value=z
      setTimeout("
    countSec( )", 1000)
    }
    </script> </head>

    <body bgcolor=lightcyan text=red> <p> </br>

    <table> <tr valign=top> <td> 
    你在本網頁的連線時間是: </td>

    <td> <form name=
    displayMin>
    <input type="text" name="
    displayBox" value="0" size=4 >
    </form> </td>
    <td> 分 </td>

    <td> <form name=
    displaySec> </td>
    <td> <input type="text" name="
    displayBox" value="0" size=4 >
    </form> </td>
    <td>
     秒。</td> </tr> </table>

    <script>
    countMin( )
    countSec( )
    </script>
    </body> </html>

    2、请你留意两个文字框总的数字转变

     

    1、这网页有两个function,一个用来计分钟,一个用来计秒,在这里,笔者只是示范setTimeout()的操作,因为计时器有其他更精简的写法。

    2、留意计秒的function

    function countSec( )
    { 
    x = 1
      z 
    x % 60
      document.
    displaySec.displayBox.value=z
      setTimeout("
    countSec( )", 1000

    }

       这的%符号是modulus(余数),例如z=x%60表示先进行x/60,得出的余数作为z这变数,例如82秒,modulus就是22,所以文字框会显示22而不是82

    3、若你要将单位数字在前加上0,例如01.02.03等,可用以下方法:

    function countSec( )
    { 
    x 1
      
    60
      if (
    z < 10) { z = "0" + z }
      document.
    displaySec.displayBox.value=z
      setTimeout("
    countSec( )", 1000)
    }

     


    10.2  clearTimeout()

        在前一节,你看过如何使用setTimeout()来使到浏览器不断执行一个function,当一个setTimeout()开始了循环的工作,我们要使它停下来,可使用clearTimeout()这method.

        clearTimeout()有以下语法:clearTimeout(timeoutID)

    要使用clearTimeout(),我们设定setTimeout()时,要给予这setTimeout()一个名称,这名称就是timeoutID,我们叫停时,这是一二自订名称,但很多程序员就以timeoutID为名。

       在下面的例子,笔者设定两个timeoutID,分别命名为meter1及meter2,如下:

    timeoutID
     ↓
    meter1 = setTimeout("count1( )", 1000)
    meter2 = setTimeout("count2( )", 1000)

       使用这meter1及meter2这些timeoutID名称,在设定clearTimeout()时,就可指定对哪一个setTimeout()有效,不会涉及另一个setTimeout()的操作。

    练习   可停止的setTimeout()

    作了两个改变,(1)有两个setTimeout(),(2)有两个按钮,分别可停止这两个setTimeout().

    1. 请用浏览器开启示范磁碟中的 clear.htm, 這檔案有以下內容:

     

    <html> <head>
    <script>
    x = 0
    y = 0

    function count1( )
    { 
    x = x + 1
      document.
    display1.box1.value = x
      meter1
    =setTimeout("count1( )", 1000)
    }

    function count2( )
    { 
    y = y + 1
      document.
    display2.box2.value = y
      meter2
    =setTimeout("count2( )", 1000)

    </script> </head>

    <body bgcolor=lightcyan text=red> <p> </br>

    <form name=
    display1>
    <input type="text" name="
    box1" value="0" size=4 >
    <input type=button value="
    停止計時" onClick="clearTimeout(meter1) " >
    <input type=button value="
    繼續計時" onClick="count1( ) " >
    </form>
    <p>
    <form name=
    display2>
    <input type="text" name="
    box2" value="0" size=4 >
    <input type=button value="
    停止計時" onClick="clearTimeout(meter2) " >
    <input type=button value="
    繼續計時" onClick="count2( ) " >
    </form>

    <script>
    count1( )
    count2( )
    </script>

    </body> </html>

    2、留意网页中的两个文字框及内变动的数字,每个文字框旁有两个按钮。

    3、请你继续按多次[继续计时]的按钮,留意数值的跳动加快了,原因是每按一次就启动function一次,每个function都令数值跳动,例如启动同一的function四次,就会一秒跳四次。

     


    10.3    Set flag

       前个练习说到我们用一个按钮来启动另一个function,每按一下就会启动这function一次,请看以下例子

       练习   效果重复的setTimeout()

       这练习实际是将简化,只有一个计时器,笔者想示范的是每按[继续计时]一次,就会启动count()这function一次,

    1. 请用浏览器开启示范磁碟中 flag1.htm, 這檔案有以下內容:

    <html> <head>
    <script>
    x=0
    function 
    count( )
    { 
    1
      document.
    display.box.value= x
      timeoutID
    =setTimeout("count( )", 1000)
    }
    </script> </head> <body bgcolor=lightcyan text=red> <p> </br>
    <form name=
    display>
    <input type="text" name="
    box" value="0" size=4 >
    <input type=button value="
    停止計時" onClick="clearTimeout(timeoutID) " >
    <input type=button value="
    繼續計時" onClick="count( ) " >
    </form> <p>

    <script>
    count( )
    </script>
    </body> </html>

    2、网页开启后,你应见到文字框中的数字跳动,请你按四次[继续计时],留意这会加快数字跳动,原因是有关的function被开启了多个,每个都会使数字转变

    3、按了四次[继续计时]的按钮后,请你按[停止计时]的按钮,你会发现要按五次才能停止数字跳动

     

       在编写程序时,我们常要提防使用者作出一些特别动作,例如使用者按两次[继续计时]按钮,这计时器就失效了,我们是否有方法使到一个按钮被按一次就失效呢?这久不会产生重复效果。

       笔者借这的例子(随后还有多个例子),解说程序中一个set flag(设定旗标)的 概念,flag是一个记录,一般来说,这可以是0或1(也可用on 或off,或任何链各个自选的名称或数字),但也可以是2.3.4或更大的数字,在这例子有以下设定:

       1、程序开启时flag=0;

       2、当counter()执行时会顺便将flag变为1;

       3、在[继续计时]这按钮的反应中,会先检查flag是0或是1,若是0就会产生作用,若是1就没有反应

       4、使用这flag的方式,count()这function开启后,[继续计时]这按钮就没有作用

         这样的flag是一个变数,可任意取名,我们用flag来称呼这变数的原因,是因为这变数好比一支旗,将旗竖起,就会产生一个作用,见旗犯下就产生另一个作用。

    练习   只可开放一次的function

    这练习是将上个练习加多一个flag,使到每次只能有一个count()这function在进行

    1. 請用瀏覽器開啟示範磁碟中的 flag2.htm, 這檔案有以下內容:

    <html> <head>
    <script>
    x = 0
    flag = 0
    function 
    count( )
    { 
    x = x + 1
      document.
    display.box.value = x
      timeoutID
    =setTimeout("count( )", 1000)
      flag 
    1
    }

    function restart( )
    { if (
    flag==0)
       { 
    count( ) }
    }
    </script> </head>

    <body bgcolor=lightcyan text=red> <p> </br>
    <form name=
    display>
    <input type="text" name="
    box" value="0" size=4 >
    <input type=button value="
    停止計時"
      onClick="clearTimeout(
    timeoutID); flag=0 " >
    <input type=button value="
    繼續計時" onClick="restart( ) " >
    </form> <p>

    <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、这网页第四行有这一句: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)。

    4、[停止计时]的按钮有一下设定:

    onClick="clearTimeout(timeoutID); flag=0 "

       这是停止setTimeout()的操作时,同时将flag转回0,这使到restart(),这function可以重新启动count().

  • 相关阅读:
    【Elasticsearch 技术分享】—— ES 常用名词及结构
    【Elasticsearch 技术分享】—— Elasticsearch ?倒排索引?这都是什么?
    除了读写锁,JUC 下面还有个 StampedLock!还不过来了解一下么?
    小伙伴想写个 IDEA 插件么?这些 API 了解一下!
    部署Microsoft.ReportViewe
    关于TFS强制undo他人check out
    几段查看数据库表占用硬盘空间的tsql
    How to perform validation on sumbit only
    TFS 2012 Disable Multiple Check-out
    在Chrome Console中加载jQuery
  • 原文地址:https://www.cnblogs.com/chenguiya/p/3145920.html
Copyright © 2011-2022 走看看