网页定时器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是单线程语言,但它允许通过设置定时器,也就是设置超时值和间歇时间来调度代码在特定的时刻执行.前者是在指定的时间过后执行代码,而后者则是每隔指定的时间就执行一次代码. 超时调用需要使 ...
随机推荐
- yii NAV x下拉
$menuItems[] = [ 'label' => "<img src='/images/small.jpg'>", 'url' => ['/site/ ...
- linux c 编程相关资料
1. linux下的错误定义及其错误捕获:http://blog.csdn.net/tigerjibo/article/details/6819891 2. 在线 c 系统调用手册 http://c. ...
- mysql 和 Oracle 数据类型对照
MySQL与Oracle两种数据库在工作中,都是用的比较多的数据库,由于MySQL与Oracle在数据类型上有部分差异,在我们迁移数据库时,会遇上一定的麻烦,下面介绍MySQL与Oracle数据库数据 ...
- javase中javax源码下载地址
OracleJDK 和 OpenJDK 源码都可以参考. OpenJDK 源码下载 http://hg.openjdk.java.net/jdk7/jdk7/jdk/file 我主要是想下载 java ...
- DIV实现垂直居中的几种方法
说道垂直居中,我们首先想到的是vertical-align属性,但是许多时候该属性并不起作用.例如,下面的样式并不能达到内容垂直居中显示 div { width:200px; height:300px ...
- Java LinkedList
LinkedList是基于双向链表实现的,先看构造方法和方法 Constructor Summary Constructors Constructor Description LinkedList() ...
- The hyperlink for cell A2 references relation rId1, but that didn't exist!
excel单元格中存在超链接,去掉 可以参考 https://www.cnblogs.com/songyunxinQQ529616136/p/6599523.html
- C/s程序过时了吗？
目前的程序从原来的形态演变成了 C/s,B/s,和手机端. 其实应该各有自己的客户群,及定位. 比如C/s为单机版的可以完成个性化突出的复杂客户端应用,企业级别的应用. B/s的特点安装简单,功能制作 ...
- 七：python 对象类型详解三：列表
一:列表简介: 1,列表可以包含任何种类的对象:数字.字符串甚至集合对象类型.列表都是可变对象,它们都支持在原处修改的操作,可以通过指定的偏移量和分片.列表方法调用.删除语句等方法来实现.关键的作用有 ...
- mycat配置实现mysql读写分离
需要先把mysql的主从复制配置好,然后才可以开始mycat的配置 m ysql主从复制配置:https://www.cnblogs.com/renjianjun/p/9093062.html myc ...