setTimeout()的用法详解及实例

最新推荐文章于 2024-09-19 14:36:08 发布
最新推荐文章于 2024-09-19 14:36:08 发布
阅读量3.2k 收藏 5
点赞数 1
分类专栏： Javascript /Jquery / Bootstrap / Web 文章标签： 浏览器 HTML JavaScript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_5904/article/details/81935624
版权

 

 

A: setTimeout( )

 

 

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

　

1. 　 setTimeout( ) 语法例子

　

等候三秒才执行的 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=”"

　　这是用来消除状态栏的文字 ( 请看练习 -20 的说明 ), 浏览器执行 clearWord( ) , 就会消除状态栏的文字。

 

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

onClick=”window.status=’Hello’ , setTimeout(‘clearWord( )’, 3000) ”

 

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

　　这是设定等 3 秒 (3000 milliseconds) 浏览器就会执行 clearWord( ) 这一个 function 。

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

　

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. 　网页开启后 , 请你留意文字框中的数值转变。

3. 　请你将这档案复制去硬盘 , 更改一些设定 , 例如 x = x+5, 或将等候时间改为 5000, 看有什么反应。

　

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

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

 

function countSecond( )

{ 　 x = x+1

　 document.fm.displayBox.value = x

　 setTimeout( “ countSecond( ) ” , 1000)

}

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

 

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

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

　

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. 　计分及计秒的 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)

}

　

　

——————————————————————————–

B: 　 clearTimeout( )

 

　　在前一节 , 你看过如何使用 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( ) 的操作。

　

可停止的 setTimeout( )

 

　　这练习以练习 -71 为蓝本 , 但作了两个改变 : (1) 有两个 setTimeout( ), (2) 有两个按钮 , 分别可停止这两个 setTimout( ) 。

 

1. 　请用浏览器开启示范磁盘中的 clear.htm, 这档案有以下内容 :

 

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<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 四次 , 就会一秒跳四次。 ( 请看下一节 )

　

　

——————————————————————————–

C: 　 Set flag

 

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

　

效果重复的 setTimeout( )

 

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

1. 　请用浏览器开启示范磁盘中的 flag1.htm, 这档案有以下内容 :

 

 

<html> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<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 来称呼这变量的原因 , 是因为这变量好处一支旗 , 将旗竖起 (flag is on), 就会产生一个作用 , 将旗放下 (flag is off), 就产生另一个作用。

　

只可开启一次的 function

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

1. 　请用浏览器开启示范磁盘中的 flag2.htm, 这档案有以下内容 :

 

 

<html> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<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="停止计时" οnclick="clearTimeout(timeoutID); flag=0 " >
<input type=button value="继续计时" οnclick="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 。

　

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) 。

4. 　 [ 停止计时 ] 的按钮有以下设定 :

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

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


 

 

 

iteye_5904
关注
专栏目录
java后台定时器最简单用法实例，类似于js里的setTimeOut
08-26
java后台定时器最简单用法实例，类似于js里的setTimeOut
实例讲解JS中setTimeout()的用法
11-25
JavaScript中的`setTimeout()`函数是一个非常重要的异步编程工具...了解其工作原理和正确使用方法对于编写高性能、响应式的前端应用至关重要。通过实例和练习，开发者可以更好地掌握这一功能，并将其应用于实际项目中。
JS中setTimeout()的使用方法具体解释
weixin_34343000的博客
06-15 105
　1. SetTimeOut()             1.1 SetTimeOut()语法样例             1.2 用SetTimeOut()运行Function              1.3 SetTimeOut()语法样例              1.4 设定条件使SetTimeOut()停止              1.5 计分及秒的counter   2. C...
js基础之setTimeout与setInterval原理分析
最新发布
京东科技开发者
09-19 931
由于JavaScript被设计为用在浏览器环境，而该环境下存在大量可能发生冲突的DOM操作，为了避免进行复杂的冲突处理（可能存在的冲突数量几乎不可预测），JavaScript的设计者舍弃了java的多线程模型（该模型下，执行引擎同时可以做几件事，但要进行线程同步），将其设计成了一门单线程语言（执行引擎在同一时间只做一件事）。setTimeout的运行机制相对简单，即在执行该语句时，设置一个定时器，定时时间置为所设置的延时，当计时结束后，将传入的函数加入任务队列，之后的执行就交给任务队列负责。
setTimeout( )
faunjoe的专栏
05-27 586
setTimeout( )德嘉書業 / 德嘉資訊科技 (www.takka.com.hk)　作者: 伍新華 Email: ng-sun-wah@graduate.hku.hk 10.1　setTimeout( )1.　setTimeout( ) 語法例子2.　用 setTimeout() 來執行 function3.　不斷重複執行的 setTimeout( )
js 中的SetTimeOut()
u010450065的专栏
10-31 4021
setTimeout( ) 是属于 window 的 method, 但我们都是略去 window 这顶层物件名称, 这是用来设定一个时间, 时间到了, 就会执行一个指定的 method setTimeout setTimeout 语法例子 用 setTimeout 来执行 function 不断重复执行的 setTimeout 设定条件使 setTi
JS中setTimeout()的用法详解
天蝎座
10-08 1019
1. SetTimeOut()     1.1 SetTimeOut()语法例子     1.2 用SetTimeOut()执行Function     1.3 SetTimeOut()语法例子     1.4 设定条件使SetTimeOut()停止     1.5 计分及秒的counter    2. ClearTimeout()    3.  Set
JavaScript定时器详解及实例
01-19
JS里设定延时： 使用SetInterval和... clearTimeout(对象) 清除已设置的setTimeout对象 clearInterval(对象) 清除已设置的setInterval对象 使用定时器实现JavaScript的延期执行或重复执行 window对象提供了两个方法来
微信小程序 loading 详解及实例代码
01-20
本文将详细解析微信小程序`loading`组件的使用方法，并提供实例代码帮助开发者更好地理解和应用。 首先，我们需要了解`loading`组件的基本属性和用法。在微信小程序中，`loading`组件主要包含以下属性： 1. `...
setTimeout经典案例
白驹过隙
08-30 1793
在日常编码中，你会发现，给 setTimeout 和 setInterval 设定延迟时间往往并不准，或者干脆 setTimeout(function(){xxx},0) 也不是立马执行（特别是有耗时代码在前），这是因为 js 是单线程的，有一个事件队列机制，setTimeout 和 setInterval 的回调会到了延迟时间塞入事件队列中，排队执行。 setTimeout ：延时 d
setTimeout用法
我是二货的博客
04-26 540
1.设定一个时间，当时间到了执行一个method setTimeout（“alert（“3秒到了”）”，3000） 2.当按下按钮时显示文字而在三秒之后自动消失 function clear(){ a.innerHTML=' '; } setTimeout（‘clear()’,3000） 3.setTimeout预设是只执行一次但是我们可以用循环方式，使用一个setTimeout再启
setTimeout的用法
boysky0015的博客
02-21 651
众所周知，js代码是自上而下执行的，也就是所谓的同步。 如果遇到异步执行的结果可能有些差异。setTimeout就是异步进行的， for(var i=0;i&lt;5;i++) { console.log('a',i); } console.log('b',i); 想问哈 a会输出什么？b呢？ 想必这个很容易，大家一定不会做错。 这里有个问题，b输入的为何是5。 解答：因为当i为5时就...
JavaScript 中的 setTimeout() 函数用法详解
孙悟空
06-02 4246
js中的setTimeout()函数用法详解，包括基本语法、调用方式、取消延迟执行。
setTimeout()的用法
猎人在吃肉
07-17 1530
setTimeout()的用法   setTimeout()的用法 //setTimeout()的用法 function showTime(){ var today = new Date(); alert("The time is: " + t
setTimeout 用法
热门推荐
weixin_43833851的博客
04-22 1万+
总的来说用法就一种： setTimeout(要执行的代码，间隔时间，参数1，参数2); 但是要执行的代码有几种写法，分别如下： 如果执行的代码不需要参数，有3种写法如下： 1，直接将js代码写在字符串中： setTimeout("alert(123)",500); 2，在字符串中调用函数： setTimeout("callFun()",500); function callFun(){ alert(456); } 3，使用匿名函数： setTimeout(()=
彻底理解setTimeout()
weixin_30823683的博客
08-07 1117
之前在网上看了很多关于setTimeout的文章，但我感觉都只是点到为止，并没有较深入的去剖析，也可能是我脑袋瓜笨，不容易被点解。后面看了《你不知道的javascript-上卷》一书，决定重新再来理一次。这次我觉得我应该整明白了。于是分享给大家，文中解释有错误的部分还希望大家留言指正。 首先我们还是来看那道大家再熟悉不过的前端面试题： for (var i = 1;i ...
setTimeout的用法及注意点
cztflove的博客
08-31 488
用法一 setTimeout("alert('hello world')", 1000 ); 用法二 function hello(){ alert("hello world"); } setTimeout(hello,1000); 用法三 setTimeout(function(){alert("hello world");},1000);注意：setTimeout中的this指向wind
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值