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实用技巧(一)
Aug 16 Javascript
javascript 单例/单体模式(Singleton)
Apr 07 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
Jun 02 Javascript
javascript alert乱码的解决方法
Nov 05 Javascript
一个Action如何调用两个不同的方法
May 22 Javascript
jQuery 处理页面的事件详解
Jan 20 Javascript
js实现新年倒计时效果
Dec 10 Javascript
VueJs路由跳转——vue-router的使用详解
Jan 10 Javascript
基于Vue实现timepicker
Apr 25 Javascript
Vue-router 切换组件页面时进入进出动画方法
Sep 01 Javascript
JS实现秒杀倒计时特效
Jan 02 Javascript
jQuery实现增删改查
Dec 22 jQuery
运用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
动漫定律:眯眯眼都是怪物!这些角色狠话不多~
2020/03/03 日漫
如何在PHP中使用Oracle数据库(6)
2006/10/09 PHP
PHP中的日期及时间
2006/11/23 PHP
PHP中如何实现常用邮箱的基本判断
2014/01/07 PHP
php实现水仙花数的4个示例分享
2014/04/08 PHP
php实现的zip文件内容比较类
2014/09/24 PHP
PHP中异常处理的一些方法整理
2015/07/03 PHP
ThinkPHP项目分组配置方法分析
2016/03/23 PHP
PHP与jquery实时显示网站在线人数实例详解
2016/12/02 PHP
提高Laravel应用性能方法详解
2019/06/24 PHP
js控制frameSet示例
2013/09/10 Javascript
文本域中换行符的替换示例
2014/03/04 Javascript
JS组件Bootstrap Table使用实例分享
2016/05/30 Javascript
微信小程序 获取相册照片实例详解
2016/11/16 Javascript
学习JS中的DOM节点以及操作
2018/04/30 Javascript
vue全局自定义指令-元素拖拽的实现代码
2019/04/14 Javascript
vue导航栏部分的动态渲染实例
2019/11/01 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
2020/02/01 Javascript
js实现查询商品案例
2020/07/22 Javascript
Python中使用bidict模块双向字典结构的奇技淫巧
2016/07/12 Python
Windows下安装python2和python3多版本教程
2017/03/30 Python
python利用socketserver实现并发套接字功能
2018/01/26 Python
Python实现删除时保留特定文件夹和文件的示例
2018/04/27 Python
Python制作exe文件简单流程
2019/01/24 Python
Python后台开发Django的教程详解(启动)
2019/04/08 Python
django-rest-framework 自定义swagger过程详解
2019/07/18 Python
wxPython实现列表增删改查功能
2019/11/19 Python
keras实现多GPU或指定GPU的使用介绍
2020/06/17 Python
python怎么判断模块安装完成
2020/06/19 Python
Python如何合并多个字典或映射
2020/07/24 Python
图解CSS3制作圆环形进度条的实例教程
2016/05/26 HTML / CSS
详解WebSocket跨域问题解决
2018/08/06 HTML / CSS
和平主题的演讲稿
2014/01/12 职场文书
厨房管理计划书
2014/04/27 职场文书
感恩教育活动总结
2014/05/05 职场文书
CSS 制作波浪效果的思路
2021/05/18 HTML / CSS