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> 請等三秒!

</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>

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>

</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 = 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( )
{　x = x + 1
　 z =x % 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 = 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 = x + 1
　 z = x % 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( )
{　x = x + 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>

<script>
count( )
</script>

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().

Javascript中setTimeout()的用法详解的更多相关文章

JavaScript中return的用法详解
JavaScript中return的用法详解最近,跟身边学前端的朋友了解,有很多人对函数中的this的用法和指向问题比较模糊,这里写一篇博客跟大家一起探讨一下this的用法和指向性问题. 1定义 t ...
JavaScript中this的用法详解
JavaScript中this的用法详解最近,跟身边学前端的朋友了解,有很多人对函数中的this的用法和指向问题比较模糊,这里写一篇博客跟大家一起探讨一下this的用法和指向性问题. 1定义 thi ...
JS中setTimeout()的用法详解
1. SetTimeOut() 1.1 SetTimeOut()语法例子 1.2 用SetTimeOut()执行Function 1.3 SetTimeOut()语法例子 1.4 设定条件使SetTi ...
javascript中的this作用域详解
javascript中的this作用域详解 Javascript中this的指向一直是困扰我很久的问题,在使用中出错的机率也非常大.在面向对象语言中,它代表了当前对象的一个引用,而在js中却经常让我觉 ...
C#中string.format用法详解
C#中string.format用法详解本文实例总结了C#中string.format用法.分享给大家供大家参考.具体分析如下: String.Format 方法的几种定义: String.Form ...
c++中vector的用法详解
c++中vector的用法详解 vector(向量): C++中的一种数据结构,确切的说是一个类.它相当于一个动态的数组,当程序员无法知道自己需要的数组的规模多大时,用其来解决问题可以达到最大节约空间 ...
javascript中=、==、===区别详解
javascript中=.==.===区别详解今天在项目开发过中发现在一个小问题.在判断n==""结果当n=0时 n==""结果也返回了true.虽然是个小问题 ...
php中setcookie函数用法详解(转)
php中setcookie函数用法详解: php手册中对setcookie函数讲解的不是很清楚,下面是我做的一些整理,欢迎提出意见. 语法: bool set ...
Mysql中limit的用法详解
Mysql中limit的用法详解在我们使用查询语句的时候,经常要返回前几条或者中间某几行数据,为我们提供了limit这样一个功能. SELECT * FROM table LIMIT [offset ...

随机推荐

android中获取打气筒的几种方式
1,简单说明,打气筒就是将我们的xml布局转换为我们的view对象,不扯远了,直接看代码 A:从context中获取 LayoutInflater inflater1 = LayoutInflater ...
Android bindservice使用
package com.example.myact10; import com.example.myact10.MyService.MyBinder; import android.support.v ...
DFT设计绪论
DFT设计的主要目的是为了将defect-free的芯片交给客户. 产品质量,通常使用Parts Per million(PPM)来衡量. 但是随着IC从SSI到VLSI的发展,在test上花销的时间 ...
PAT乙级 1024. 科学计数法 (20)
1024. 科学计数法 (20) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 HOU, Qiming 科学计数法是科学家用来表示很 ...
Android真机测试 INSTALL_FAILED_INSUFFICIENT_STORAGE 解决方法[转]
方法一: 试试修改一下manifest文件 :添加一句: android:installLocation="preferExternal" [html]view plainc ...
zw版【转发·台湾nvp系列Delphi例程】HALCON DispCross
zw版[转发·台湾nvp系列Delphi例程]HALCON DispCross procedure TForm1.Button1Click(Sender: TObject);var r, c : Ol ...
五、Java基础---------if else、switch总结
在前几篇博客中主要是以笔者遇到的一些典型的题目为例子而展开的讨论,接下来几篇将是以知识点的结构进行讲述.本文主要是讲述if ()else .if() else if().switch() case 的 ...
高手看了，感觉惨不忍睹——关于“【ACM】杭电ACM题一直WA求高手看看代码”
按被中科大软件学院二年级研究生 HCOONa 骂为“误人子弟”之后(见:<中科大的那位,敢更不要脸点么?> ),继续“误人子弟”. 问题: 题目:(感谢王爱学志网友对题目给出的翻译) ...
使用Json.Net处理json序列化和反序列化接口或继承类
以前一直没有怎么关注过Newtonsoft的Json.Net这个第三方的.NET Json框架,主要是我以前在开发项目的时候大多数使用的都是.NET自带的Json序列化类JavaScriptSeria ...
Servlet工作原理（转）
Servlet运行在Servlet容器中,由容器负责Servlet实例的查找及创建工作,并按照Servlet规范的规定调用Servlet的一组方法,这些方法也叫生命周期的方法.具体调用过程如下图所示: ...

Javascript中setTimeout()的用法详解

Javascript中setTimeout()的用法详解的更多相关文章

随机推荐

热门专题