1、setTimeout()是属于window的method,但我们都是略去window 这个顶层对象的名称, 这是用来设定一个时间, 时间到了, 就会执行一个指定的method。请先看以下一个简单的例子。
setTimeout() 是设定一个指定等候时间 (单位是千分之一秒, millisecond), 时间到了, 浏览器就会执行一个指定的 method 或 function。
setTimeout(”alert(’对不起，让你久等了’)”, 3000 )中alert(’对不起，让你久等了！)就是指定要执行的method，3000就是要执行的等候时间。
2、用 setTimeout()来执行 function
setTimeout()通常是与function一起使用, 以下是一个较上一个例子复杂点的例子。
点击一下按钮, 你能看到状态栏出现Hello, 三秒后文字自动消失。
A、在这里事先设定了一个clearWord()的方法, 定义如：window.status=”";即让状态栏的文字清空。
B、点击按钮后会依次执行两项工作，用“，”隔开；onClick=”window.status=’Hello’ , setTimeout(’clearWord( )’, 3000) “。
3、不断重复执行setTimeout( )方法
setTimeout( ) 预设只是执行一次, 但我们可以使用一个循环方式, 使到一个setTimeout( )再执行自己一次, 就会使到第二个setTimeout()执行, 第二个又启动第三个, 这样循环下去, setTimeout( ) 就会不断执行了。
下面的例子就是令文本框里面的数值每秒加1：
A、此例子中有两个script, 第一个是设定countSecond( ) 这个地, 第二个是在网页完全载入后再执行的function
B、当countSecond()启动后, 就会启动setTimeout(), 这个method 在一秒后又启动 countSecond( ), countSecond( ) 启动后又启动setTimeout( ) , 所以得出的结果是 countSecond( ) 每秒执行一次。
4、设定条件使 setTimeout( ) 停止
setTimeout( ) 的循环开始后, 就会不断重复, 在上个例子中, 你看到文字框的数字不断递增, 但有方法使到数字跳到某一个数值就停下来, 其中一個方法是用 if…else 设定一個条件, 若是 TRUE 就继续执行setTimeout( ) , 若是 FALSE 就停止。
例如要使到上个例子的 counter 跳到 20 就停下, 可以将有关的function 作以下的更改。
function countSecond( )
{ if ( x < 20 )
{ x = x + 1
document.displaySec.displayBox.value = x
setTimeout(”countSecond( )”, 1000)
}
}
5、clearTimeout( )
在上面已以看过如何使用setTimeout( )来使到浏览器不断执行一个function, 当一个 setTimeout( ) 开始了循环的工作, 我们要使它停下来, 可使用 clearTimeout( ) 这个method。
clearTimout( ) 有以下语法: clearTimeout(timeoutID)
要使用 clearTimeout( ), 我们設定 setTimeout( ) 时, 要给予setTimout( ) 一个名称, 这个名称就是 timeoutID , 我们让它停止, 就是用timeoutID来叫停。
在下面的例子中, 设定两个timeoutID, 分別命名为meter1 及 meter2, 如下:
meter1 = setTimeout(”count1( )”, 1000)
meter2 = setTimeout(”count2( )”, 1000)
下面是一个可停止的setTimeout( )
6、给循环Set flag
先看这个例子
在上面的例子中，网页打开后, 你会看见文本框中的数字递增效果, 请按四次 [继续计时]按钮, 留意现在会加快数字跳动, 原因是有关的 function 被开启了多个, 每个都会使数字改变。当连续按四次[继续计时]按钮后，再按[停止计时]按钮，你会发现要按五次后数字才会停下来。
再看下面一个改进的例子
网页开启后，点击[Show flag]按钮时，提示的flag是1，点击[停止计时]按钮后再点击[Show flag]按钮后，提示是flag是0，点击[继续计时]按钮后再点击[Show flag]按钮后，提示变回flag是1，通过这样的方法可以避免前面例子出现点击多次计时按钮会改变数值改变速度的情况发生。
