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 相关文章推荐
收藏一些不常用,但是有用的代码
Mar 12 Javascript
Jquery选择器 $实现原理
Dec 02 Javascript
js中top的作用深入剖析
Mar 04 Javascript
jquery实现效果比较好的table选中行颜色
Mar 25 Javascript
javascript中Date对象的getDay方法使用指南
Dec 22 Javascript
JS实现从连接中获取youtube的key实例
Jul 02 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
Aug 21 Javascript
JavaScrip常见的一些算法总结
Dec 28 Javascript
js获取当前时间(昨天、今天、明天)
Nov 23 Javascript
微信小程序 地图map实例详解
Jun 07 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
Jan 10 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
Jun 10 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
百事可乐也出咖啡了 双倍咖啡因双倍快乐
2021/03/03 咖啡文化
PHP SPL使用方法和他的威力
2013/11/12 PHP
CodeIgniter CLI模式简介
2014/06/17 PHP
php实现搜索类封装示例
2016/03/31 PHP
PHP排序算法之直接插入排序(Straight Insertion Sort)实例分析
2018/04/20 PHP
爱恋千雪-US-AscII加密解密工具(网页加密)下载
2007/06/06 Javascript
jquer之ajaxQueue简单实现代码
2011/09/15 Javascript
JS解决url传值出现中文乱码的另类办法
2013/04/08 Javascript
JavaScript静态类型检查工具FLOW简介
2015/01/06 Javascript
理解javascript定时器中的单线程
2016/02/23 Javascript
第七章之菜单按钮图标组件
2016/04/25 Javascript
AngularJS基础 ng-paste 指令简单示例
2016/08/02 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
2017/02/10 Javascript
基于vue2.0+vuex的日期选择组件功能实现
2017/03/13 Javascript
AngularJS路由切换实现方法分析
2017/03/17 Javascript
BootStrap表单时间选择器详解
2017/05/09 Javascript
深入理解Vue官方文档梳理之全局API
2017/11/22 Javascript
AngularJS 前台分页实现的示例代码
2018/06/07 Javascript
利用JS如何获取form表单数据
2019/12/19 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
2020/12/24 Javascript
python 读写中文json的实例详解
2017/10/29 Python
Python实现查找数组中任意第k大的数字算法示例
2019/01/23 Python
Python unittest工作原理和使用过程解析
2020/02/24 Python
伦敦哈德森鞋:Hudson Shoes
2018/02/06 全球购物
澳大利亚运动鞋商店:Platypus Shoes
2019/09/27 全球购物
Farfetch中文官网:奢侈品牌时尚购物平台
2020/03/15 全球购物
优秀小学生家长评语
2014/01/30 职场文书
《诺贝尔》教学反思
2014/02/17 职场文书
营销与策划专业求职信
2014/06/20 职场文书
十八大宣传标语
2014/10/09 职场文书
计生个人工作总结
2015/02/28 职场文书
公文写作指导之倡议书!
2019/07/03 职场文书
vue+springboot实现登录验证码
2021/05/27 Vue.js
pytorch 实现多个Dataloader同时训练
2021/05/29 Python
Spring实现内置监听器
2021/07/09 Java/Android
Win10开机修复磁盘错误怎么跳过?Win10关闭开机磁盘检查的方法
2022/09/23 数码科技