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下arguments,caller,callee,call,apply示例及理解
Dec 24 Javascript
跟着JQuery API学Jquery 之三 筛选
Apr 09 Javascript
用JavaScript仿PS里的羽化效果代码
Dec 20 Javascript
extjs两个tbar问题探讨
Aug 08 Javascript
jQuery实现dialog设置focus焦点的方法
Jun 10 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
May 24 Javascript
node.js的事件机制
Feb 08 Javascript
Vue组件开发初探
Feb 14 Javascript
浅谈JS验证表单文本域输入空格的问题
Feb 14 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
Oct 11 Javascript
vue.js整合mint-ui里的轮播图实例代码
Dec 27 Javascript
vue.js实现只弹一次弹框
Jan 29 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
Snoopy类使用小例子
2008/04/15 PHP
php生成缩略图的类代码
2008/10/02 PHP
在JavaScript中调用php程序
2009/03/09 PHP
字母顺序颠倒而单词顺序不变的php代码
2010/08/08 PHP
php之Memcache学习笔记
2013/06/17 PHP
ThinkPHP整合百度Ueditor图文教程
2014/10/21 PHP
thinkPHP删除前弹出确认框的简单实现方法
2016/05/16 PHP
基于laravel where的高级使用方法
2019/10/10 PHP
比较简单的异步加载JS文件的代码
2009/07/18 Javascript
基于jquery的tab切换 js原理
2010/04/01 Javascript
JQuery在光标位置插入内容的实现代码
2010/06/18 Javascript
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
完美解决AJAX跨域问题
2013/11/01 Javascript
window.print打印指定div指定网页指定区域的方法
2014/08/04 Javascript
javascript创建函数的20种方式汇总
2015/06/23 Javascript
KnockoutJs快速入门教程
2016/05/16 Javascript
JavaScript实现九九乘法表的简单实例
2016/06/07 Javascript
js字符串引用的两种方式(必看)
2016/09/18 Javascript
Angular在模板驱动表单中自定义校验器的方法
2017/08/09 Javascript
深入理解ES6之数据解构的用法
2018/01/13 Javascript
JS实现对json对象排序并删除id相同项功能示例
2018/04/18 Javascript
JavaScript遍历DOM元素的常见方式示例
2019/02/16 Javascript
Angular8 实现table表格表头固定效果
2020/01/03 Javascript
深入理解Python3中的http.client模块
2017/03/29 Python
Sanic框架流式传输操作示例
2018/07/18 Python
浅谈tensorflow中张量的提取值和赋值
2020/01/19 Python
Python ORM框架Peewee用法详解
2020/04/29 Python
python爬虫数据保存到mongoDB的实例方法
2020/07/28 Python
创立科技Java面试题
2015/11/29 面试题
环境工程专业毕业生求职信
2014/09/30 职场文书
学生抄作业检讨书(2篇)
2014/10/17 职场文书
医生个人年终总结
2015/02/28 职场文书
小学教育见习总结
2015/06/23 职场文书
幼儿园中班教学反思
2016/03/03 职场文书
关于EntityWrapper的in用法
2022/03/22 Java/Android
Docker部署Mysql8的实现步骤
2022/07/07 Servers