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 相关文章推荐
解决遍历时Array.indexOf产生的性能问题
Jul 03 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
Oct 17 Javascript
简介JavaScript中setUTCSeconds()方法的使用
Jun 12 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
Oct 28 Javascript
JS实现的几个常用算法
Nov 12 Javascript
AngularJS中的按需加载ocLazyLoad示例
Jan 11 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
Feb 13 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
vue如何判断dom的class
Apr 26 Javascript
浅谈vux之x-input使用以及源码解读
Nov 04 Javascript
小程序实现左右来回滚动字幕效果
Dec 28 Javascript
JavaScript制作3D旋转相册
Aug 02 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
无JS,完全php面向过程数据分页实现代码
2012/08/27 PHP
php常用数组函数实例小结
2016/12/29 PHP
详谈PHP面向对象中常用的关键字和魔术方法
2017/02/04 PHP
PHP针对redis常用操作实例详解
2019/08/17 PHP
Javascript实例教程(19) 使用HoTMetal(6)
2006/12/23 Javascript
jQuery的链式调用浅析
2010/12/03 Javascript
javascript开发技术大全 第4章 直接量与字符集
2011/07/03 Javascript
两个listbox实现选项的添加删除和搜索
2013/03/01 Javascript
jquery动态增加删除表格行的小例子
2013/11/14 Javascript
JavaScript利用正则表达式去除日期中的“-”
2014/07/01 Javascript
node.js中的fs.fsyncSync方法使用说明
2014/12/15 Javascript
分析了一下JQuery中的extend方法实现原理
2015/02/27 Javascript
原生JS实现美图瀑布流布局赏析
2015/09/07 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
2016/08/15 Javascript
easyui messager alert 三秒后自动关闭提示的实例
2016/11/07 Javascript
d3.js中冷门却实用的内置函数总结
2017/02/04 Javascript
Express使用html模板的详细代码
2017/09/18 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
2018/08/16 Javascript
小程序实现长按保存图片的方法
2019/12/31 Javascript
[01:00:53]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Secret
2018/03/30 DOTA
Python处理JSON数据并生成条形图
2016/08/05 Python
Python 中 list 的各项操作技巧
2017/04/13 Python
Python+Wordpress制作小说站
2017/04/14 Python
matplotlib设置legend图例代码示例
2017/12/19 Python
Python之list对应元素求和的方法
2018/06/28 Python
Python函数参数操作详解
2018/08/03 Python
pytorch下使用LSTM神经网络写诗实例
2020/01/14 Python
浅谈Python中的模块
2020/06/10 Python
Tensorflow使用Anaconda、pycharm安装记录
2020/07/29 Python
10个最常见的HTML5面试题 附答案
2016/06/06 HTML / CSS
美国领先的家居装饰和礼品商店:Kirkland’s
2017/01/30 全球购物
C语言笔试题回忆
2015/04/02 面试题
物流仓储实习自我鉴定
2013/09/25 职场文书
先进事迹演讲稿
2014/09/01 职场文书
“四风”问题对照检查材料思想汇报
2014/09/16 职场文书
nginx proxy_cache 缓存配置详解
2021/03/31 Servers