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 iframe的相互操作浅析
Oct 14 Javascript
Javascript图像处理—为矩阵添加常用方法
Dec 27 Javascript
js修改input的type属性问题探讨
Oct 12 Javascript
JS实现在状态栏显示打字效果完整实例
Nov 02 Javascript
Bootstrap每天必学之折叠(Collapse)插件
Apr 25 Javascript
Bootstrap Paginator分页插件使用方法详解
May 30 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
Jun 21 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
Sep 20 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
Dec 23 Javascript
bootstrap弹出层的多种触发方式
May 10 Javascript
Vue循环遍历选项赋值到对应控件的实现方法
Jun 22 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
Aug 03 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
Apache 配置详解(最好的APACHE配置教程)
2010/07/04 PHP
php摘要生成函数(无乱码)
2012/02/04 PHP
php更新修改excel中的内容实例代码
2014/02/26 PHP
TinyMCE 新增本地图片上传功能
2010/11/05 Javascript
jQuery.autocomplete 支持中文输入(firefox)修正方法
2011/03/10 Javascript
多引号嵌套的变量命名的问题
2014/05/09 Javascript
javascript结合CSS实现苹果开关按钮特效
2015/04/07 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
2015/06/05 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
2016/01/18 Javascript
jQuery购物网页经典制作案例
2016/08/19 Javascript
详解vue-router基本使用
2017/04/18 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
2017/05/02 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
js实现日期显示的一些操作(实例讲解)
2017/07/27 Javascript
详解vue-admin和后端(flask)分离结合的例子
2018/02/12 Javascript
Vue 中的受控与非受控组件的实现
2018/12/17 Javascript
vue 动态创建组件的两种方法
2020/12/31 Vue.js
举例详解Python中的split()函数的使用方法
2015/04/07 Python
仅用50行代码实现一个Python编写的计算器的教程
2015/04/17 Python
python类继承用法实例分析
2015/05/27 Python
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
Python实现基于C/S架构的聊天室功能详解
2018/07/07 Python
Python 打印中文字符的三种方法
2018/08/14 Python
python flask几分钟实现web服务的例子
2019/07/26 Python
关于Python Tkinter Button控件command传参问题的解决方式
2020/03/04 Python
Python中的xlrd模块使用原理解析
2020/05/21 Python
解决Python3.7.0 SSL低版本导致Pip无法使用问题
2020/09/03 Python
C语言面试题
2013/05/19 面试题
市场营销毕业生自荐信
2013/11/23 职场文书
物流合作计划书
2014/01/10 职场文书
安全协议书范本
2014/04/21 职场文书
2014年党员承诺书范文
2014/05/20 职场文书
竞聘演讲稿开场白
2014/08/25 职场文书
考试没考好检讨书
2015/05/06 职场文书
音乐会主持人开场白
2015/05/28 职场文书
感恩教师节主题班会
2015/08/12 职场文书