JavaScript的计时器对象
1、JavaScript计时器，我们可以在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。
计时器类型：
1）一次性计时器：仅在指定的延迟时间之后触发一次。
2）间隔性触发计时器：每隔一定的时间间隔就触发一次。
计时器方法：
1）setInterval() :在执行时,从载入页面后每隔指定的时间执行代码。
//语法
setInterval(代码,交互时间); //参数说明：1. 代码：要调用的函数或要执行的代码串。2. 交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms）。 //返回值:一个可以传递给 clearInterval() 从而取消对"代码"的周期性执行的值。 //调用函数格式：(假设有一个clock()函数):
setInterval("clock()",)
//或
setInterval(clock,) //例子
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
var int=setInterval(clock, )//调用计时器
function clock(){
var time=new Date();
document.getElementById("clock").value = time;
}
</script>
</head>
<body>
<form>
<input type="text" id="clock" size="" />
</form>
</body>
</html>
2）取消计时器clearInterval()：clearInterval() 方法可取消由 setInterval() 设置的交互时间。
//语法
clearInterval(id_of_setInterval) //参数说明:id_of_setInterval：由 setInterval() 返回的 ID 值。 //例子
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
function clock(){
var time=new Date();
document.getElementById("clock").value = time;
}
// 每隔100毫秒调用clock函数，并将返回值赋值给i
var i=setInterval("clock()",);
</script>
</head>
<body>
<form>
<input type="text" id="clock" size="" />
<input type="button" value="Stop" onclick="clearInterval(i)" />
</form>
</body>
</html>
//每隔 100 毫秒调用 clock() 函数,并显示时间。当点击按钮时，停止时间
3)setTimeout()计时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次。
//语法
setTimeout(代码,延迟时间); //参数说明：1. 要调用的函数或要执行的代码串。2. 延时时间：在执行代码前需等待的时间，以毫秒为单位（1s=1000ms)。 //例子1
//打开网页3秒后，在弹出一个提示框
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
setTimeout("alert('Hello!')", );
</script>
</head>
<body>
</body>
</html> //例子2
//当按钮start被点击时，setTimeout()调用函数，在5秒后弹出一个提示框
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function tinfo(){
var t=setTimeout("alert('Hello!')",);
}
</script>
</head>
<body>
<form>
<input type="button" value="start" onClick="tinfo()">
</form>
</body>
</html> //例子3
//创建一个运行于无穷循环中的计数器，需要编写一个函数来调用其自身。在下面的代码，当按钮被点击后，输入域便从0开始计数
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var num=;
function numCount(){
document.getElementById('txt').value=num;
num=num+;
setTimeout("numCount()",);
}
</script>
</head>
<body>
<form>
<input type="text" id="txt" />
<input type="button" value="Start" onClick="numCount()" />
</form>
</body>
</html>
4)取消计时器clearTimeout(), setTimeout()和clearTimeout()一起使用，停止计时器。
//语法
clearTimeout(id_of_setTimeout) //参数说明:id_of_setTimeout：由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。 //例子：添加了一个 "Stop" 按钮来停止这个计数器
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var num=,i;
function timedCount(){
document.getElementById('txt').value=num;
num=num+;
i=setTimeout(timedCount,);
}
setTimeout(timedCount,);
function stopCount(){
clearTimeout(i);
}
</script>
</head>
<body>
<form>
<input type="text" id="txt">
<input type="button" value="Stop" onClick="stopCount()">//停止按钮
</form>
</body>
</html>
setinterval与settimeout区别：
1）因为setTimeout(表达式,延时时间)在执行时,是在载入后延迟指定时间后,去执行一次表达式,记住,次数是一次；
而setInterval(表达式,交互时间)则不一样,它从载入后,每隔指定的时间就执行一次表达式
所以,完全是不一样的 2）很多人习惯于将setTimeout包含于被执行函数中,然后在函数外再次使用setTimeout来达到定时执行的目的；
这样,函数外的setTimeout在执行函数时再次触发setTimeout从而形成周而复始的定时效果。 3）使用的时候各有各的优势，使用setInterval，需要手动的停止tick触发。而使用方法中嵌套setTimeout，可以根据方法内部本身的逻辑不再调用setTimeout就等于停止了触发。
//setTimeout例子
showTime();
function showTime(){
var day = new Date();
alert("时间是: " + day.toString());
setTimeout("showTime()", );
} //setInterval例子
setInterval("showTime()", );
function showTime(){
var day = new Date();
alert("时间是: " + day.toString());
} 这两种方法可能看起来非常像，而且显示的结果也会很相似，不过两者的最大区别就是，setTimeout方法不会每隔1秒钟就执行一次showTime函数，它是在每次调用setTimeout后过1秒钟再去执行showTime函数。这意味着如果showTime函数的主体部分需要2秒钟执行完，那么整个函数则要每3秒钟才执行一次。而setInterval却没有被自己所调用的函数所束缚，它只是简单地每隔一定时间就重复执行一次那个函数。
如果要求在每隔一个固定的时间间隔后就精确地执行某动作，那么最好使用setInterval，而如果不想由于连续调用产生互相干扰的问题，尤其是每次函数的调用需要繁重的计算以及很长的处理时间，那么最好使用setTimeout。
如果对计时函数不加以处理，那么setInterval将会持续执行相同的代码，一直到浏览器窗口关闭，或者用户转到了另外一个页面为止。不过还是有办法可以终止setTimeout和setInterval函数的执行。
JavaScript的计时器对象的更多相关文章
- javascript是判断对象是否是数组
JS中的数据类型: 2大类 原始类型:值保存在变量本地的数据类型 5种:Number String Boolean undefined null Number:8bytes 舍入误差-->四舍五 ...
- JavaScript 基础回顾——对象
JavaScript是基于对象的解释性语言,全部数据都是对象.在 JavaScript 中并没有 class 的概念,但是可以通过对象和类的模拟来实现面向对象编程. 1.对象 在JavaScript中 ...
- javascript中的对象，原型，原型链和面向对象
一.javascript中的属性.方法 1.首先,关于javascript中的函数/“方法”,说明两点: 1)如果访问的对象属性是一个函数,有些开发者容易认为该函数属于这个对象,因此把“属性访问”叫做 ...
- Javascript 中判断对象为空
发现了一个巧妙的实现: 需要检查一个对象(Object)是否为空,即不包含任何元素.Javascript 中的对象就是一个字典,其中包含了一系列的键值对(Key Value Pair).检查一个对象是 ...
- JavaScript 中的对象
JavaScript 中的对象 在 JavaScript 中,对象是数据(变量),拥有属性和方法. JavaScript 中的所有事物都是对象:字符串.数字.数组.日期,等等. 访问对象的属性 访 ...
- 使用JavaScript的history对象来实现页面前进后退(go/back/forward)。
我们都知道JavaScript有history对象,主要是用来记录浏览器窗口的浏览记录.但是,JS脚本是不允许访问到这个记录里面的内容(隐私). 常见的用法是: history.back();//返回 ...
- javascript类型系统——Math对象
× 目录 [1]常量 [2]函数 前面的话 javascript使用算术运算符实现基本的算术运算,如果要实现更加复杂的算术运算,需要通过Math对象定义的常量和函数来实现.和其他对象不同,Math只是 ...
- javascript中Date对象的应用——简易日历的实现
× 目录 [1]效果 [2]HTML [3]CSS[4]JS 前面的话 简易日历作为javascript中Date对象的常见应用,用途较广泛.本文将详细说明简易日历的实现思路 效果演示 HTML说明 ...
- JavaScript学习04 对象
JavaScript学习04 对象 默认对象 日期对象Date, 格式:日期对象名称=new Date([日期参数]) 日期参数: 1.省略(最常用): 2.英文-数值格式:月 日,公元年 [时:分: ...
随机推荐
- Redmine插件及使用
Plugins Plugin list A full list of available Redmine plugins can be found at the Plugin Directory. M ...
- VC 2008 Express下安装OpenCV2.3.1
VC 2008 Express下安装OpenCV2.3.1 注意: 下列文档以VC2008 Express为例,VC2010下的配置应与本文档类似. VC 6.0不被OpenCV 2.3.1支持. ...
- Runloop与autoreleasePool联系
autoreleasePool自动释放池,ARC模式下,苹果会自动进行内存管理,不需要我们手动去管理内存.这对于苹果开发者来说,省去了很多事情,不用再每天为了内存管理浪费掉宝贵的开发时间.大家都知道, ...
- Sara Chipps
"To be a developer you really need to love to learn because you're going to be learning your en ...
- c++ 常见问题之 const
const 默认状态下const对象仅在文件内有效,添加extern关键字可以在多个文件共享 const 引用: 可以把引用绑定到const对象上,对常量的引用不能被用作修改它所绑定的对象 const ...
- 初步使用nodejs（一）
初步使用nodejs(一) 首先打开 https://nodejs.org/,点击INSTALL下载安装 安装完成后 打开CMD 输入node –v 验证是否正常 至此,NODEJS安装完成. 下载W ...
- 使用 FormsAuthentication 来进行登录验证
1.在web.config文件中,<system.web>/<authentication>配置节用于对验证进行配置.为<authentication>节点提供mo ...
- 循序渐进看Java web日志跟踪（1）-Tomcat 日志追踪与配置
日志,是软件运行过程中,对各类操作中重要信息的记录. 日志跟踪,不管对于怎么样的项目来说,都是非常重要的一部分,它关系到项目后期的维护和排错,起着举足轻重的作用.项目开发过程中,对日志的记录规则,也将 ...
- LCT
一个LCT看了一天了,但是很多地方还是理解的很模糊,简单谈一下理解. LCT支持的是对于森林的分裂.合并,以及查询节点的连通性等操作. 对于这片森林来说,它是由一坨树组成的,对于每一棵树,我们采用类似 ...
- c# 强制退出程序
引用:http://blog.csdn.net/tanhua103292/article/details/4283203 1.强制退出WinForm程序之Application.Exit和Enviro ...