网页定时器setTimeout( )
不斷重複執行的 setTimeout( )
setTimeout( ) 預設只是執行一次, 但我們可以使用一個循環方式, 使到一個setTimeout( ) 再啟動自己一次, 就會使到第二個 setTimeout( ) 執行, 第二個又啟動第三個, 這樣循環下去, 這setTimeout( ) 就會不斷執行。
練習-71 自動每秒加 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)
}
}
来自http://blog.csdn.net/zhengzhichen/article/details/3079943#t3
网页定时器setTimeout( )的更多相关文章
- JavaScript之关闭轮询定时器(setTimeout/clearTimeout|setInterval/clearInterval)小结
已知: 1.1 开启Timeout程序: scope.setTimeout("functionName()" | functionHandle, timeValue) 返回值:ti ...
- 定时器setTimeout()和setInterval()使用心得整理
JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成. 一.setTimeout() setTimeout函 ...
- 有关定时器setTimeout()、setInterval()详解
JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成. setTimeout() setTimeout函数用 ...
- 关于定时器 setTimeout
1.这里不考虑线程问题.把javascript想象成在时间线上运行,页面载入时,首先执行的是<script>标签中的代码,之后,将执行更多代码,当进程空闲时,下个代码就被触发并执行 如图: ...
- Javascript 笔记与总结（2-13）定时器 setTimeout 和 setInterval
定时器可以让 js 效果每隔几秒钟执行一次或者 n 秒之后执行某一个效果.定时器不属于 javascript,是 window 对象提供的功能. setTimeout 用法: window.setTi ...
- javascript定时器:setTimeout与setInterval
概述: setTimeout:在指定的延迟时间之后调用一个函数或者执行一个代码片段,只执行一次: setInterval:周期性地调用一个函数(function)或者执行一段代码,重复执行: 语法格式 ...
- 定时器setTimeout()和Node.js的Event Loop
一.定时器 setTimeout(fn,0)的含义是,指定某个任务在主线程最早可得的空闲时间执行,也就是说,尽可能早得执行.它在"任务队列"的尾部添加一个事件,因此要等到同步任务和 ...
- 关于定时器setTimeout()方法的实践--巧解bug
_使用开发环境:UAP:_ _框架:JQuery.MX:_ 最近的开发的页面中,有一处需要在提交的 datagrid里启用行编辑,就会发生奇怪的bug,编辑过程中如图所示不移开焦点直接点保存,那么已输 ...
- 定时器 setTimeout()超时调用和 setInterval()间歇调用
JavaScript是单线程语言,但它允许通过设置定时器,也就是设置超时值和间歇时间来调度代码在特定的时刻执行.前者是在指定的时间过后执行代码,而后者则是每隔指定的时间就执行一次代码. 超时调用需要使 ...
随机推荐
- app.route()
[app.route()] 可使用 app.route() 创建路由路径的链式路由句柄.由于路径在一个地方指定,这样做有助于创建模块化的路由,而且减少了代码冗余和拼写错误.请参考 Router() 文 ...
- metasploitable使用
DVWA默认的用户有5个,用户名密码如下(一个足以): admin/password gordonb/abc123 1337/charley pablo/letmein smithy/password
- JMeter学习（十八）JMeter处理Cookie与Session（转载）
转载自 http://www.cnblogs.com/yangxia-test 有些网站保存信息是使用Cookie,有些则是使用Session.对于这两种方式,JMeter都给予一定的支持. 1.Co ...
- js增减日期
参考 https://www.cnblogs.com/gmq-sh/p/5194706.html date.setDate(date.getDate() + 3);
- git图片
- pta l2-5（集合相似度）
题目链接:https://pintia.cn/problem-sets/994805046380707840/problems/994805070149828608 题意:求两个集合的相同的不同元素的 ...
- 205. Isomorphic Strings (Map)
Given two strings s and t, determine if they are isomorphic. Two strings are isomorphic if the chara ...
- 消除游戏源码 Match 3 Jewel Full 298 Levels
Match 3 Jewel Full 298 Levels 一款unity3d编写的消消乐游戏, 关卡丰富,很好玩 下载地址:点击下载
- Springboot学习02-webjars和静态资源映射规则
Springboot学习01-webjars和静态资源映射规则 前言 1-以前我们在IDEA中创建一个项目,添加web依赖包,我们现在是一个web应用,应该在man目录下面有一个webapp文件夹,将 ...
- 博客（二）注册页面django
首先上一个html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...