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.英文-数值格式:月 日,公元年 [时:分: ...
随机推荐
- Linux环境搭建Hadoop伪分布模式
Hadoop有三种分布模式:单机模式.伪分布.全分布模式,相比于其他两种,伪分布是最适合初学者开发学习使用的,可以了解Hadoop的运行原理,是最好的选择.接下来,就开始部署环境. 首先要安装好Lin ...
- 图像预处理(Evision)
Convolution //采用线性过滤Linear combination of neighboring pixels using a convolution kernel−Pre-defined ...
- AR/VR行业是否会像智能手机一样的飞速崛起
从硬件和内容两方面来看,VR(虚拟现实)应该会比AR(增强现实)率先普及大众.当然,这是建立在解决无线化.眩晕.便携等问题之后的事儿,内容上不用担心,照现在这个发展速度-- 说到"风口&qu ...
- Linux Ubuntu 虛擬機系統自定義桌面分辨率且重啓後保持不變
我用 VMware Workstation 12 Pro 安裝的 Ubuntu MATE Desktop Environment 1.12.1,發現安裝後沒有需要的分辨率,於是安裝 VMware To ...
- Mysql 常用命令和注意事项
1. 连接mysql数据库 如果配置了环境变量可以直接运行,如果没有配置环境变量需要在安装目录...\bin下运行, cmd -> mysql -u root -p,然后输入密码: 或者可以运行 ...
- StringBuilder跟StringBuffer
一直以来只知道StringBuffer是线程安全的,StringBuilder是线程不安全的, 所以通常情况下使用StringBuilder,这样可以提升效率!!! 今天由于想起StringBuild ...
- Ajax实现页面动态加载，添加数据
前台代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Products ...
- html-----vedio标签（HTML5新标签VIDEO在IOS上默认全屏播放）
今天做一个app时发现一个问题,应用html5中的video标签加载视频,在Android手机上默认播放大小,但是换成iPhone手机上出问题了,默认弹出全屏播放,查找了好多论坛,都没有谈论这个的.然 ...
- c# 操作xml之xmlReader
xmlReader的名称空间using System.Xml; xmlReader是通过流的方式来读取xml文件的内容 <?xml version="1.0" encodin ...
- NEUQ1051: 谭浩强C语言(第三版)习题6.7
//C代码简直难看到家,求大神知道如何写出复用性好的,维护性强的代码... //格式错误了好几次,最后发现是are和数字之间多了个空格......本来一直以为是最后的换行多了,费劲搞掉了. #incl ...