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 相关文章推荐
js中的值类型和引用类型小结 文字说明与实例
Dec 12 Javascript
JQuery动态给table添加、删除行 改进版
Jan 19 Javascript
JQuery实现用户名无刷新验证的小例子
Mar 22 Javascript
jquery的live使用注意事项
Feb 18 Javascript
使用javascript实现Iframe自适应高度
Dec 24 Javascript
javascript实现简单的ajax封装示例
Dec 28 Javascript
Javascript中构造函数要注意的一些坑
Jan 23 Javascript
Vue响应式添加、修改数组和对象的值
Mar 20 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
Apr 18 Javascript
JS+canvas动态绘制饼图的方法示例
Sep 12 Javascript
JavaScript 继承 封装 多态实现及原理详解
Jul 29 Javascript
微信小程序学习总结(五)常见问题实例小结
Jun 04 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
centos 5.6 升级php到5.3的方法
2011/05/14 PHP
php设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
php牛逼的面试题分享
2013/01/18 PHP
php中让上传的文件大小在上传前就受限制的两种解决方法
2013/06/24 PHP
php使用正则表达式提取字符串中尖括号、小括号、中括号、大括号中的字符串
2020/04/05 PHP
PHP闭包函数传参及使用外部变量的方法
2016/03/15 PHP
php JWT在web端中的使用方法教程
2018/09/06 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
基于Jquery的将DropDownlist的选中值赋给label的实现代码
2011/05/06 Javascript
js jq 单击和双击区分示例介绍
2013/11/05 Javascript
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
jQuery实现的AJAX简单弹出层效果代码
2015/11/26 Javascript
JavaScript表单验证实例之验证表单项是否为空
2016/01/10 Javascript
JavaScript tab选项卡插件实例代码
2016/02/23 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
2016/04/03 Javascript
js实现可控制左右方向的无缝滚动效果
2016/05/29 Javascript
小程序自定义组件实现城市选择功能
2018/07/18 Javascript
vue实现带复选框的树形菜单
2019/05/27 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
2020/04/17 Javascript
Vue数据双向绑定原理实例解析
2020/05/15 Javascript
python实现的简单窗口倒计时界面实例
2015/05/05 Python
用Python3创建httpServer的简单方法
2018/06/04 Python
python opencv实现图像边缘检测
2019/04/29 Python
windows10环境下用anaconda和VScode配置的图文教程
2020/03/30 Python
Python第三方库的几种安装方式(小结)
2020/04/03 Python
巴西化妆品商店:Lojas Rede
2019/07/26 全球购物
英国No.1体育用品零售商:SportsDirect.com
2019/10/16 全球购物
请描述一下”is a”关系和”has a”关系
2015/02/03 面试题
金蝶的一道SQL笔试题
2012/12/18 面试题
安全生产网格化管理实施方案
2014/03/01 职场文书
怎样拟定创业计划书
2014/05/01 职场文书
党员领导干部承诺书
2014/05/28 职场文书
语文教师求职信范文
2015/03/20 职场文书
重阳节活动主持词
2015/07/04 职场文书
关于空气污染危害的感想
2015/08/11 职场文书
幼儿园语言教学反思
2016/02/23 职场文书