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.英文-数值格式:月 日,公元年 [时:分: ...
随机推荐
- C++ STD inner_product函数
C++ STD函数 inner_product是c++标准库封装的一个函数. 函数原型: 函数1: inner_product(beg1, end1, beg2, init) 函数2: inner ...
- JQuery基础知识（1）
JQuery基础知识(1) 对JQuery学习中遇到的小细节进行了整理和总结 1.JQuery hide()和show()方法,分别对选中的元素进行隐藏和显示,语法:hide()和show分别有对应的 ...
- java 的序列化
(1) 首先是java自己内部实现的对象序列化机制 其实就是ObjectInputStream 和 ObjectOutputStream 首先实现一个实体对象 记住必须实现Serializable ...
- 在Windows上创建同样的Linux操作环境
在之前的文章中,介绍了我在GNU/Linux图形界面环境下所使用的工具集合.其基本目的是在保证占用最少系统资源的条件下,将电脑操作效率推向极致.这样的工具组合尤如瑞士军刀一般,简洁.高效.功能全面.与 ...
- 关于java集合排序
对于排序,java开发者并不陌生. 为避免以后遗忘,现在再次总结一下! 常见8大排序算法, 平时自己熟悉的只有几种种!冒泡,二分/折半.插入.快排等!现在一一讲解一下,这里只讲思想,暂时不做实现! 一 ...
- springIOC
从这段代码开始 ApplicationContext context = new ClassPathXmlApplicationContext("beans.xml"); Pers ...
- MariaDB数据解压版安装（10.0.16）
官网下载地址:https://downloads.mariadb.org/ (自己选择版本下载) 在windows 7 下安装 1.下载到解压版安装文件mariadb-10.0.16-win32 ...
- awakeFromNib、initWithCoder、initWithFrame三者区别
(1)awakeFromNib和initWithCoder:差别awakeFromNib 从xib或者storyboard加载完毕就会调用initWithCoder: 只要对象是从文件解析来的,就会调 ...
- java程序基础
- dwr推送技术深入研究
DWR 工作原理: 是通过动态把 Java 类生成为 Javascript.它的代码就像 Ajax 一样,你感觉调用就像发生在浏览器端,但是实际上代码调用发生在服务器端,DWR 负责数据的传递和转换. ...