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 相关文章推荐
取得父标签
Nov 14 Javascript
新浪中用来显示flash的函数
Apr 02 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
Apr 04 Javascript
js 自动播放的实例代码
Nov 19 Javascript
浅析Ajax语法
Dec 05 Javascript
vue-hook-form使用详解
Apr 07 Javascript
详解原生js实现offset方法
Jun 15 Javascript
vue脚手架中配置Sass的方法
Jan 04 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
PM2自动部署代码步骤流程总结
Dec 10 Javascript
JS利用prototype给类添加方法操作详解
Jun 21 Javascript
微信小程序开发之转发分享功能
Oct 22 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
实战mysql导出中文乱码及phpmyadmin导入中文乱码的解决方法
2010/06/11 PHP
PHP三层结构(上) 简单三层结构
2010/07/04 PHP
使用php记录用户通过搜索引擎进网站的关键词
2014/02/13 PHP
php实现删除指定目录下相关文件的方法
2014/10/20 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
让iframe自适应高度(支持XHTML,支持FF)
2007/07/24 Javascript
JavaScript 获取用户客户端操作系统版本
2009/08/25 Javascript
jQuery中add实现同时选择两个id对象
2010/10/22 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
2014/08/12 Javascript
详解JavaScript中的blink()方法的使用
2015/06/08 Javascript
jquery实现可旋转可拖拽的文字效果代码
2016/01/27 Javascript
Bootstrap Img 图片样式(推荐)
2016/12/13 Javascript
angular2 ng build部署后base文件路径问题详细解答
2017/07/15 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
php中and 和 &amp;&amp;出坑指南
2018/07/13 Javascript
详解es6超好用的语法糖Decorator
2018/08/01 Javascript
使用Vue调取接口,并渲染数据的示例代码
2019/10/28 Javascript
JavaScript中break、continue和return的用法区别实例分析
2020/03/02 Javascript
django简单的前后端分离的数据传输实例 axios
2020/05/18 Javascript
[02:20]2014DOTA2西雅图邀请赛 MVP外卡赛首胜采访
2014/07/09 DOTA
python修改操作系统时间的方法
2015/05/18 Python
python 2.6.6升级到python 2.7.x版本的方法
2016/10/09 Python
Python操作mysql数据库实现增删查改功能的方法
2018/01/15 Python
从DataFrame中提取出Series或DataFrame对象的方法
2018/11/10 Python
对YOLOv3模型调用时候的python接口详解
2019/08/26 Python
在Python IDLE 下调用anaconda中的库教程
2020/03/09 Python
如何用Python 实现全连接神经网络(Multi-layer Perceptron)
2020/10/15 Python
python 用struct模块解决黏包问题
2020/11/07 Python
python 对象真假值的实例(哪些视为False)
2020/12/11 Python
HTML5制作酷炫音频播放器插件图文教程
2014/12/30 HTML / CSS
美国在线肉类和海鲜配送:Crowd Cow
2020/10/02 全球购物
大四学生思想汇报
2014/01/13 职场文书
工作证明格式及范本
2014/09/12 职场文书
十一国庆节“向国旗敬礼”主题班会活动方案
2014/09/27 职场文书
刑事辩护词范文
2015/05/21 职场文书
关于企业的执行力标语大全
2020/01/06 职场文书