网页定时器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是单线程语言,但它允许通过设置定时器,也就是设置超时值和间歇时间来调度代码在特定的时刻执行.前者是在指定的时间过后执行代码,而后者则是每隔指定的时间就执行一次代码. 超时调用需要使 ...
随机推荐
- 2018面向对象程序设计（Java）第8周学习指导及要求
2018面向对象程序设计(Java)第8周学习指导及要求 (2018.10.18-2018.10.21) 学习目标 掌握接口定义方法: 掌握实现接口类的定义要求: 掌握实现了接口类的使用要求: 理 ...
- Python 图示集绵
http://nbviewer.jupyter.org/github/pyecharts/pyecharts-users-cases/blob/master/notebook-users-cases/ ...
- 如何区分Java中的方法重载和重写
首先说的是重载: 方法的重载 * 在同一个类中,方法名相同,参数列表不同.与返回值类型无关. * 参数列表不同: * A:参数个数不同 * B:参数类型不同 * C:参数的顺序不同(不算重载 报错) ...
- Python 函数内变量的作用域
Python程序中创建.改变.查找变量名时,都是在一个保存变量名的空间中进行,我们称之为命名空间,也被称之为作用域. 全局作用域(global):即在模块层次中定义的变量,每一个模块都是一个全局作用域 ...
- JMeter学习（十三）目录介绍（转载）
转载自 http://www.cnblogs.com/yangxia-test JMeter也学了一阵子了,对于基本的操作已了解,再回过头来看看Jmeter的目录,本篇是对于它的目录进行一些简单的介绍 ...
- sqlserver 当前时间减去30天
参考 https://zhidao.baidu.com/question/750666819064717772.html select dateadd(dd,-30,getdate()) from 表 ...
- 关于 No buffer space available (maximum connections reached?): connect 的处理
一.问题: hudson一个应用打包部署一直不成功,检查报错 检查项目的JOB配置,开始以为是SVN的问题,但是重启SVN后问题一直存在 二.分析: TCP协议中,关闭TCP连接的是Server端(当 ...
- javaWEB登录ajax传值
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- Compare Version Numbers(STRING-TYPE CONVERTION)
QUESTION Compare two version numbers version1 and version1.If version1 > version2 return 1, if ve ...
- 【python-sql】sql操作时遇到的坑
针对python的sql语句的封装以及调用: python的db操作类: # -*- coding: utf-8 -*- # coding=utf-8 import MySQLdb class Dat ...