JS Timing


Posted in Javascript onApril 21, 2007

使用JS是可以让函数不直接执行的,而是在过了一个指定的时间间隔后才执行。这就叫做事件事件。
With JavaScript, it is possible to execute some code NOT immediately after a function is called, but after a specified time interval. This is called timing events.
使用JS是可以让函数不直接执行的,而是在过了一个指定的时间间隔后才执行。这就叫做事件事件。
JavaScript Timing Events
JS时间事件
With JavaScript, it is possible to execute some code NOT immediately after a function is called, but after a specified time interval. This is called timing events.
使用JS是可以让函数不直接执行的,而是在过了一个指定的时间间隔后才执行。这就叫做事件事件。
It's very easy to time events in JavaScript. The two key methods that are used are:
JS的时间事件是非常简单的。使用了两个关键的方法:
    * setTimeout() - executes a code some time in the future
      在一些时间后执行代码
    * clearTimeout() - cancels the setTimeout()
      取消setTimeout() 
Note: The setTimeout() and clearTimeout() are both methods of the HTML DOM Window object.
注意:setTimeout() 和 Timeout() 都是HTML DOM Window 对象的方法。
setTimeout()
Syntax语法
var t=setTimeout("javascript statement",milliseconds)
The setTimeout() method returns a value - In the statement above, the value is stored in a variable called t. If you want to cancel this setTimeout(), you can refer to it using the variable name.
setTimeout()方法返回一个值 - 在上面的声明里,值被保存在变量t中。如果你想取消这个setTimeout()可以使用变量名来提出它(用clearTimeout(t))
The first parameter of setTimeout() is a string that contains a JavaScript statement. This statement could be a statement like "alert('5 seconds!')" or a call to a function, like "alertMsg()".
setTomeout()的第一个参数是字符串声明。它可以像"alert('5 seconds!')"或是调用一个函数像"alertMsg()"
The second parameter indicates how many milliseconds from now you want to execute the first parameter.
第二个参数用来表明从现在开始你希望在多少毫秒后执行第一个参数
Note: There are 1000 milliseconds in one second.
1000毫秒为一秒
Example
举例
When the button is clicked in the example below, an alert box will be displayed after 5 seconds.
当下面的按钮被点击后,每过5秒就会出现一个警告框。
<html>
<head>
<script type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('5 seconds!')",5000)
}
</script>
</head>
<body>
<form>
<input type="button" value="Display timed alertbox!"
onClick="timedMsg()">
</form>
</body>
</html>
Example - Infinite Loop
无限循环
To get a timer to work in an infinite loop, we must write a function that calls itself. In the example below, when the button is clicked, the input field will start to count (for ever), starting at 0:
要得到一个无限循环的记时器,我们必须写出一个自我调用的函数。下面的例子,当按钮按下后,输入框就会从0开始记数(永远的)
<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
</script>
</head>
<body>
<form>
<input type="button" value="Start count!"
onClick="timedCount()">
<input type="text" id="txt">
</form>
</body>
</html>
clearTimeout()
Syntax语法
clearTimeout(setTimeout_variable)
Example
举例
The example below is the same as the "Infinite Loop" example above. The only difference is that we have now added a "Stop Count!" button that stops the timer:
下面的例子和上面的“无限循环”差不多。唯一的不同就是我们现在多了一个“停止记数”的按钮来停止记时器。
<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
function stopCount()
{
clearTimeout(t)
}
</script>
</head>
<body>
<form>
<input type="button" value="Start count!"
onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="Stop count!"
onClick="stopCount()">
</form>
</body>
</html>

Javascript 相关文章推荐
根据分辩率调用不同的CSS.
Jan 08 Javascript
浅谈javascript回调函数
Dec 07 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
Dec 04 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
Sep 19 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
Mar 26 Javascript
Vue.js自定义指令的用法与实例解析
Jan 18 Javascript
React简单介绍
May 24 Javascript
Vuejs 单文件组件实例详解
Feb 09 Javascript
vue组件详解之使用slot分发内容
Apr 09 Javascript
基于vue实现可搜索下拉框定制组件
Mar 26 Javascript
bootstrap下拉分页样式 带跳转页码
Dec 29 Javascript
JavaScript架构localStorage特殊场景下二次封装操作
Jun 21 Javascript
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
Apr 21 #Javascript
JS 建立对象的方法
Apr 21 #Javascript
如何做到打开一个页面,过几分钟自动转到另一页面
Apr 20 #Javascript
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
Apr 20 #Javascript
在textarea中显示html页面的javascript代码
Apr 20 #Javascript
textarea的value是html文件源代码,存成html文件的代码
Apr 20 #Javascript
在textarea中屏蔽js的某个function的javascript代码
Apr 20 #Javascript
You might like
PHP 单引号与双引号的区别
2009/11/24 PHP
php自定义函数之递归删除文件及目录
2010/08/08 PHP
如何用PHP实现插入排序?
2013/04/10 PHP
thinkphp模板用法和内容输出实例
2014/11/28 PHP
php 中奖概率算法实现代码
2017/01/25 PHP
一段利用WSH修改和查看IP配置的代码
2008/05/11 Javascript
判断是否安装flash player及当前版本的JS代码
2013/08/08 Javascript
document.compatMode的CSS1compat使用介绍
2014/04/03 Javascript
鼠标移到图片上变大显示而不是放大镜效果
2014/06/15 Javascript
异步JS框架的作用以及实现方法
2015/10/29 Javascript
JavaScript严格模式详解
2015/11/18 Javascript
全面解析Javascript无限添加QQ好友原理
2016/06/15 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
jsonp跨域请求详解
2017/07/13 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
2018/12/03 Javascript
使用 node.js 模仿 Apache 小部分功能
2019/07/07 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
2019/09/18 Javascript
Python解析xml中dom元素的方法
2015/03/12 Python
python使用pil生成缩略图的方法
2015/03/26 Python
python使用PyGame绘制图像并保存为图片文件的方法
2015/04/24 Python
Pandas读取并修改excel的示例代码
2019/02/17 Python
学python安装的软件总结
2019/10/12 Python
Tensorflow 多线程与多进程数据加载实例
2020/02/05 Python
Python内存映射文件读写方式
2020/04/24 Python
HTML5 Blob 实现文件下载功能的示例代码
2019/11/29 HTML / CSS
美国批发零售网站:GearXS
2016/07/26 全球购物
约瑟夫·特纳男装:Joseph Turner
2017/10/10 全球购物
Genny意大利官网:意大利高级时装品牌
2020/04/15 全球购物
物业工作计划书
2014/01/10 职场文书
后勤主管岗位职责
2014/03/01 职场文书
承诺书范文
2014/06/03 职场文书
委托书怎么写
2014/07/31 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
电影红河谷观后感
2015/06/11 职场文书
党纪处分决定书
2015/06/24 职场文书
学校学习型党组织建设心得体会
2019/06/21 职场文书