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读取cookie函数代码
Oct 16 Javascript
菜鸟javascript基础整理1
Dec 06 Javascript
jquery获取tr中控件值并操作tr实现思路
Mar 27 Javascript
javascript获取所有同类checkbox选项(实例代码)
Nov 07 Javascript
jQuery取消特定的click事件
Feb 29 Javascript
JQuery异步加载PartialView的方法
Jun 07 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
Aug 10 Javascript
js制作支付倒计时页面
Oct 21 Javascript
webpack配置的最佳实践分享
Apr 21 Javascript
JS判断非空至少输入两个字符的简单实现方法
Jun 23 Javascript
VUE2实现事件驱动弹窗示例
Oct 21 Javascript
vue中使用微信公众号js-sdk踩坑记录
Mar 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
PHP那些琐碎的知识点(整理)
2017/05/20 PHP
PHP实现统计代码行数小工具
2019/09/19 PHP
关于B/S判断浏览器断开的问题讨论
2008/10/29 Javascript
jquery ajaxSubmit 异步提交的简单实现
2014/02/28 Javascript
js/jquery获取文本框输入焦点的方法
2014/03/04 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
2016/10/26 Javascript
遍历json获得数据的几种方法小结
2017/01/21 Javascript
Vue2.0父子组件传递函数的教程详解
2017/10/16 Javascript
详解javascript 正则表达式之分组与前瞻匹配
2018/05/30 Javascript
在vue中v-bind使用三目运算符绑定class的实例
2018/09/29 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
2019/01/08 Javascript
微信小程序实现音频文件播放进度的实例代码
2020/03/02 Javascript
[00:20]TI9观赛名额抽取Ⅱ
2019/07/24 DOTA
Python3.x中自定义比较函数
2015/04/24 Python
Python自定义主从分布式架构实例分析
2016/09/19 Python
Python基于递归算法实现的汉诺塔与Fibonacci数列示例
2018/04/18 Python
python numpy 按行归一化的实例
2019/01/21 Python
Win10+GPU版Pytorch1.1安装的安装步骤
2019/09/27 Python
给keras层命名,并提取中间层输出值,保存到文档的实例
2020/05/23 Python
Python jieba结巴分词原理及用法解析
2020/11/05 Python
PyTorch中clone()、detach()及相关扩展详解
2020/12/09 Python
加拿大时尚少女服装品牌:Garage
2016/10/10 全球购物
物流仓管员工作职责
2014/01/06 职场文书
女方回门宴答谢词
2014/01/14 职场文书
活动策划邀请函
2014/02/06 职场文书
会计学专业自荐信
2014/06/25 职场文书
机关作风建设工作总结
2014/10/23 职场文书
节水倡议书
2015/01/19 职场文书
给老师的感谢信
2015/01/20 职场文书
客户经理岗位职责
2015/01/31 职场文书
2015年万圣节活动总结
2015/03/24 职场文书
2016年“抗战胜利纪念日”71周年校园广播稿
2015/12/18 职场文书
社区服务理念口号
2015/12/25 职场文书
redis三种高可用方式部署的实现
2021/05/11 Redis
Python3接口性能测试实例代码
2021/06/20 Python
Spring Boot 使用 Spring-Retry 进行重试框架
2022/04/24 Java/Android