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 相关文章推荐
Ext JS 4实现带week(星期)的日期选择控件(实战二)
Aug 21 Javascript
解析prototype,JQuery中跳出each循环的方法
Dec 12 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
Mar 04 Javascript
JS实现鼠标移上去显示图片或微信二维码
Dec 14 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
Jan 10 Javascript
javascript使用btoa和atob来进行Base64转码和解码
Mar 20 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 Javascript
vue通过watch对input做字数限定的方法
Jul 13 Javascript
node.js将MongoDB数据同步到MySQL的步骤
Dec 10 Javascript
webpack搭建vue 项目的步骤
Dec 27 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
Nov 14 Javascript
webpack4实现不同的导出类型
Apr 09 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
Yii隐藏URL中index.php的方法
2016/07/12 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
jQuery 幻灯片插件(带缩略图功能)
2011/01/24 Javascript
用js实现trim()的解决办法
2013/04/16 Javascript
JS 退出系统并跳转到登录界面的实现代码
2013/06/29 Javascript
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
2015/07/29 Javascript
3种不同的ContextMenu右键菜单实现代码
2016/11/03 Javascript
js实现点击按钮弹出上传文件的窗口
2016/12/23 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
2018/04/25 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
2018/06/06 Javascript
Vue开发实现吸顶效果的示例代码
2018/08/21 Javascript
JS如何实现手机端输入验证码效果
2020/05/13 Javascript
react使用CSS实现react动画功能示例
2020/05/18 Javascript
如何管理Vue中的缓存页面
2021/02/06 Vue.js
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python笔记(2)
2012/10/24 Python
python使用urllib模块开发的多线程豆瓣小站mp3下载器
2014/01/16 Python
Python实现堆排序的方法详解
2016/05/03 Python
使用Python的Twisted框架构建非阻塞下载程序的实例教程
2016/05/25 Python
matplotlib savefig 保存图片大小的实例
2018/05/24 Python
对python中的高效迭代器函数详解
2018/10/18 Python
Python Django简单实现session登录注销过程详解
2019/08/06 Python
在 Windows 下搭建高效的 django 开发环境的详细教程
2020/07/27 Python
酒店副总岗位职责
2013/12/24 职场文书
高三地理教学反思
2014/01/11 职场文书
优秀广告词大全
2014/03/19 职场文书
求职信内容怎么写
2014/05/26 职场文书
人事任命书格式
2014/06/05 职场文书
代领毕业证委托书
2014/08/02 职场文书
运动会报道稿300字
2014/10/02 职场文书
债务追讨授权委托书范本
2014/10/16 职场文书
学校禁毒宣传活动总结
2015/05/08 职场文书
Mysql 设置boolean类型的操作
2021/06/04 MySQL
用Python生成会跳舞的美女
2022/01/18 Python
Python OpenCV实现图像模板匹配详解
2022/04/07 Python