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 事件冒泡简介及应用
Jan 11 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
Mar 01 Javascript
概述jQuery中的ajax方法
Dec 16 Javascript
JS实现JSON.stringify的实例代码讲解
Feb 07 Javascript
ES6新特性四:变量的解构赋值实例
Apr 21 Javascript
浅谈webpack 自动刷新与解析
Apr 09 Javascript
微信小程序的线程架构【推荐】
May 14 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
May 24 Javascript
Flutter实现仿微信底部菜单栏功能
Sep 18 Javascript
微信小程序转发事件实现解析
Oct 22 Javascript
基于JS判断对象是否是数组
Jan 10 Javascript
通过实例解析jQ Ajax操作相关原理
Sep 23 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函数
2006/12/06 PHP
php产生随机数的两种方法实例代码 输出随机IP
2011/04/08 PHP
php之CodeIgniter学习笔记
2013/06/17 PHP
PHP基于php_imagick_st-Q8.dll实现JPG合成GIF图片的方法
2014/07/11 PHP
ThinkPHP中RBAC类的四种用法分析
2014/11/24 PHP
php树型类实例
2014/12/05 PHP
PHP代码判断设备是手机还是平板电脑(两种方法)
2015/10/19 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解
2020/02/12 PHP
js获取浏览器的可视区域尺寸的实现代码
2011/11/30 Javascript
JavaScript框架是什么?怎样才能叫做框架?
2015/07/01 Javascript
分享两款带遮罩的jQuery弹出框
2015/12/30 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
2016/06/14 Javascript
Augularjs-起步详解
2016/07/08 Javascript
javascript 判断是否是微信浏览器的方法
2016/10/09 Javascript
浅谈React 属性和状态的一些总结
2016/11/21 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
2016/12/28 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
2017/04/19 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
2018/01/02 jQuery
echarts柱状图背景重叠组合而非并列的实现代码
2020/12/10 Javascript
Python实现获取某天是某个月中的第几周
2015/02/11 Python
Python交互环境下实现输入代码
2018/06/22 Python
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
Python解决两个整数相除只得到整数部分的实例
2018/11/10 Python
pandas factorize实现将字符串特征转化为数字特征
2019/12/19 Python
CSS3教程(5):网页背景图片
2009/04/02 HTML / CSS
纯CSS实现的大小渐变、渐远效果
2014/04/15 HTML / CSS
英国第二大营养品供应商:Vitabiotics
2016/10/01 全球购物
公司出纳岗位职责
2013/12/07 职场文书
创建服务型党组织实施方案
2014/02/25 职场文书
植树节口号
2014/06/21 职场文书
大学生档案自我鉴定(2篇)
2014/10/14 职场文书
会计电算化实训报告
2014/11/04 职场文书
2015年社区居委会工作总结
2015/05/18 职场文书
2016年班主任新年寄语
2015/08/18 职场文书
详解Nginx启动失败的几种错误处理
2021/04/01 Servers