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 相关文章推荐
获取内联和链接中的样式(js代码)
Apr 11 Javascript
JS获取IP、MAC和主机名的五种方法
Nov 14 Javascript
javascript使用avalon绑定实现checkbox全选
May 06 Javascript
js实现a标签超链接提交form表单的方法
Jun 24 Javascript
JavaScript中数组添加值和访问值常见问题
Feb 06 Javascript
批量下载对路网图片并生成html的实现方法
Jun 07 Javascript
jquery 获取select数组与name数组长度的实现代码
Jun 20 Javascript
JS图片放大效果简单实现代码
Sep 08 Javascript
JavaScript正则表达式和级联效果
Sep 14 Javascript
详解微信小程序中组件通讯
Oct 30 Javascript
vue组件间通信六种方式(总结篇)
May 15 Javascript
如何从头实现一个node.js的koa框架
Jun 17 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匿名函数和use子句用法实例
2016/03/16 PHP
PHP二维数组去重实例分析
2016/11/18 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
php nginx 实时输出的简单实现方法
2018/01/21 PHP
PHP设计模式之建造者模式(Builder)原理与用法案例详解
2019/12/12 PHP
JS的参数传递示例介绍
2014/02/08 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
2014/06/23 Javascript
jQuery中bind()方法用法实例
2015/01/19 Javascript
基于jquery实现弹幕效果
2016/09/29 Javascript
AngularJS过滤器filter用法实例分析
2016/11/04 Javascript
Bootstrop实现多级下拉菜单功能
2016/11/24 Javascript
vue基于mint-ui的城市选择3级联动的示例
2017/10/25 Javascript
JavaScript设计模式之建造者模式实例教程
2018/07/02 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
2019/01/31 Javascript
python获取本机mac地址和ip地址的方法
2015/04/29 Python
python操作excel的包(openpyxl、xlsxwriter)
2018/06/11 Python
Python3.0中普通方法、类方法和静态方法的比较
2019/05/03 Python
pygame实现非图片按钮效果
2019/10/29 Python
Pycharm debug调试时带参数过程解析
2020/02/03 Python
Python函数必须先定义,后调用说明(函数调用函数例外)
2020/06/02 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
python爬虫要用到的库总结
2020/07/28 Python
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
2018/11/30 HTML / CSS
Eyeko美国:屡获殊荣的睫毛膏、眼线笔和眉妆
2018/07/05 全球购物
BLACKMORES澳洲官网:澳大利亚排名第一的保健品牌
2018/09/27 全球购物
卫校中专生个人自我评价
2013/09/19 职场文书
《一件运动衫》教学反思
2014/02/19 职场文书
老人祝寿主持词
2014/03/28 职场文书
计算机应用专业毕业生求职信
2014/06/03 职场文书
学校运动会霸气口号
2014/06/07 职场文书
工作作风承诺书
2014/08/30 职场文书
销售经理岗位职责
2015/01/31 职场文书
质量整改通知单
2015/04/21 职场文书
2015年大学宣传部工作总结
2015/05/26 职场文书
导游词之蜀山胜景瓦屋山
2019/11/29 职场文书
奇妙的 CSS shapes(CSS图形)
2021/04/05 HTML / CSS