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 相关文章推荐
Javascript获取表单名称(name)的方法
Apr 02 Javascript
JS实现三个层重叠点击互相切换的方法
Oct 06 Javascript
jquery实现具有收缩功能的垂直导航菜单
Feb 16 Javascript
浅谈js和css内联外联注意事项
Jun 30 Javascript
jquery checkbox的相关操作总结
Oct 17 Javascript
详解Javascript数据类型的转换规则
Dec 12 Javascript
AugularJS从入门到实践(必看篇)
Jul 10 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
Jul 28 Javascript
AngularJS中controller控制器继承的使用方法
Nov 03 Javascript
vue todo-list组件发布到npm上的方法
Apr 04 Javascript
AngularJS模态框模板ngDialog的使用详解
May 11 Javascript
React中嵌套组件与被嵌套组件的通信过程
Jul 11 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 获取文件路径(灵活应用__FILE__)
2013/02/15 PHP
windows下PHP_intl.dll正确配置方法(apache2.2+php5.3.5)
2014/01/14 PHP
实现获取http内容的php函数分享
2014/02/16 PHP
PHP模板引擎Smarty内建函数详解
2016/04/11 PHP
针对多用户实现头像上传功能PHP代码 适用于登陆页面制作
2016/08/17 PHP
PHP实现字符串大小写转函数的功能实例
2019/02/06 PHP
asp 的 分词实现代码
2007/05/24 Javascript
Javascript 函数对象的多重身份
2009/06/28 Javascript
jquery 学习笔记 传智博客佟老师附详细注释
2020/09/12 Javascript
JavaScript类和继承 this属性使用说明
2010/09/03 Javascript
javascript与cookie 的问题详解
2013/11/11 Javascript
JQuery结合CSS操作打印样式的方法
2013/12/24 Javascript
JavaScript的9种继承实现方式归纳
2015/05/18 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
JS中产生标识符方式的演变
2015/06/12 Javascript
JQuery实现左右滚动菜单特效
2015/09/28 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
2015/12/23 Javascript
JQuery选中select组件被选中的值方法
2018/03/08 jQuery
JS中如何轻松遍历对象属性的方式总结
2019/08/06 Javascript
js刷新页面location.reload()用法详解
2019/12/09 Javascript
Python内置函数OCT详解
2016/11/09 Python
python 限制函数执行时间,自己实现timeout的实例
2019/01/12 Python
Django实现单用户登录的方法示例
2019/03/28 Python
python使用socket 先读取长度,在读取报文内容示例
2019/09/26 Python
Window版下在Jupyter中编写TensorFlow的环境搭建
2020/04/10 Python
使用python无账号无限制获取企查查信息的实例代码
2020/04/17 Python
基于opencv实现简单画板功能
2020/08/02 Python
python实现AdaBoost算法的示例
2020/10/03 Python
Vs Code中8个好用的python 扩展插件
2020/10/12 Python
台湾旅游网站:灿星旅游
2018/10/11 全球购物
另类冲刺标语
2014/06/24 职场文书
专升本学生毕业自我鉴定
2014/10/04 职场文书
上课迟到检讨书300字
2014/10/15 职场文书
学风建设主题班会
2015/08/17 职场文书
python cv2图像质量压缩的算法示例
2021/06/04 Python
使用vue判断当前环境是安卓还是IOS
2022/04/12 Vue.js