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.英文-数值格式:月 日,公元年 [时:分: ...
随机推荐
- python爆破zip脚本
最近在提高自己编程能力,拿一些实用的小工具练下.该脚本为python语言,主要涉及模块zipfile,threadings模块. 功能:暴力猜解zip解压密码 #coding: utf-8 impor ...
- neovim的新体验
A. 缘由 vim下的CtrlP插件好用,但是当文件较多时,不能很快检索,时有卡死的情况发生.听说neovim引入了很多新的功能,例如异步处理,job管理等. B. 安装neovim1. Ubunt ...
- <hdu - 1863> 畅通工程 并查集和最小生成树问题
本题链接:http://acm.hdu.edu.cn/showproblem.php?pid=1863 Problem Description: 省政府“畅通工程”的目标是使全省任何两个村庄间都可以 ...
- ModelState.IsValid一直为false的原因
一,问题:ModelState.IsValid一直为false 二,解决方法和原因, 由于这个方法中传过来的RegisterForm模型的字段,某一个为空值,则会造成这个验证验证为false,去注释掉 ...
- 《Javascript权威指南》
<Javascript权威指南> chorme.safari中的input或textarea html超链接(a)详细讲解 html5新增及删除标签 html表格 图片加alt属性
- live555—VS2010/VS2013 下live555编译、使用及测试(转载)
Ⅰ live555简介 Live555 是一个为流媒体提供解决方案的跨平台的C++开源项目,它实现了对标准流媒体传输协议如RTP/RTCP.RTSP.SIP等 的支持.Live555实现了对多种音视频 ...
- Java NIO 内存映射文件
Java NIO 内存映射文件 @author ixenos 文件操作的四大方法 前提:内存的访问速度比磁盘高几个数量级,但是基本的IO操作是直接调用native方法获得驱动和磁盘交互的,IO速度限制 ...
- 一篇顺手的Ubuntu+caffe配置笔记
主要参考: https://github.com/lbzhang/dl-setup http://ouxinyu.github.io/Blogs/20151108001.html http://www ...
- sql优化--in和exists效率
系统要求进行SQL优化,对效率比较低的SQL进行优化,使其运行效率更高,其中要求对SQL中的部分in/not in修改为exists/not exists 修改方法如下: in的SQL语句 SELEC ...
- JS中的Replace只会替换第一处解决办法
解决这个问题只需将replace的第一个参数使用正则的方式即可,代码如下: var reg = new RegExp(",","g"); var str = & ...