JavaScript中的定时器之Item23的合理使用


Posted in Javascript onOctober 30, 2015

在javascritp中,有两个关于定时器的专用函数,它们是: 

1.倒计定时器:timename=setTimeout("function();",delaytime); 
2.循环定时器:timename=setInterval("function();",delaytime); 

1、定时器概述

window对象提供了两个方法来实现定时器的效果,分别是window.setTimeout()和window.setInterval。其中前者可以使一段代码在指定时间后运行;而后者则可以使一段代码每过指定时间就运行一次。它们的原型如下:

window.setTimeout(expression,milliseconds); 
window.setInterval(expression,milliseconds);

其中,expression可以是用引号括起来的一段代码,也可以是一个函数名,到了指定的时间,系统便会自动调用该函数,当使用函数名作为调用句柄时, 不能带有任何参数;而使用字符串时,则可以在其中写入要传递的参数。两个方法的第二个参数是milliseconds,表示延时或者重复执行的毫秒数。下 面分别介绍两种方法。

使用SetInterval和设定延时函数setTimeout 很类似。setTimeout 运用在延迟一段时间,再进行某项操作。

setTimeout("function",time) 设置一个超时对象
setInterval("function",time) 设置一个超时对象
setInterval为自动重复,setTimeout不会重复。

clearTimeout(对象) 清除已设置的setTimeout对象
clearInterval(对象) 清除已设置的setInterval对象
使用定时器实现JavaScript的延期执行或重复执行 .

2、具体使用

1.window.setTimeout方法

该方法可以延时执行一个函数,例如:

function hello(){ 
  alert("hello"); 
} 
window.setTimeout(hello,5000);

这段代码将使得页面打开5秒钟后显示对话框“hello”。其中最后一句也可以写为:

window.setTimeout("hello()",5000);

读者可以体会它们的差别,在window.setInterval方法中也有这样的性质。

如果在延时期限到达之前取消延执行,可以使用window.clearTimeout(timeoutId)方法,该方法接收一个id,表示一个定时器。这个id是由setTimeout方法返回的,例如:

function hello(){ 
   alert("hello"); 
} 
var id=window.setTimeout(hello,5000); 
document.onclick=function(){ 
   window.clearTimeout(id); 
}

这样,如果要取消显示,只需单击页面任何一部分,就执行了window.clearTimeout方法,使得超时操作被取消。

2.window.setInterval方法

该方法使得一个函数每隔固定时间被调用一次,是一个很常用的方法。如果想要取消定时执行,和clearTimeout方法类似,可以调用 window.clearInterval方法。clearInterval方法同样接收一个setInterval方法返回的值作为参数。例如:

//定义一个反复执行的调用 
var id=window.setInterval("somefunction",10000); 
//取消定时执行 
window.clearInterval(id);

3. Demo小练习

上面的代码仅用于说明怎样取消一个定时执行。实际上在很多场合都需要用到setInterval方法,下面将设计一个秒表,来介绍setInterval 函数的用途:该秒表将包括两个按钮和一个用于显示时间的文本框。当单击开始按钮时开始计时,最小单位为0.01秒,此时再次单击按钮则停止计时,文本框显 示经过的时间。另外一个按钮用于将当前时间清零。其实现代码如下:

<html> 
<head> 
<title> New Document </title> 
</head> 
<body> 
  <form action="somepage.asp"> 
    <input type="text" value="0" name="txt1"/> 
    <input type="button" value="开始" name="btnStart"/> 
    <input type="button" value="重置" name="btnReset"/> 
  </form> 
</body> 
</html> 
<script language="JavaScript" type="text/javascript"> 
<!-- 
//获取表单中的表单域 
var txt=document.forms[0].elements["txt1"]; 
var btnStart=document.forms[0].elements["btnStart"]; 
var btnReset=document.forms[0].elements["btnReset"] 
//定义定时器的id 
var id; 
//每10毫秒该值增加1 
var seed=0; 
btnStart.onclick=function(){ 
   //根据按钮文本来判断当前操作 
   if(this.value=="开始"){ 
       //使按钮文本变为停止 
       this.value="停止"; 
       //使重置按钮不可用 
       btnReset.disabled=true; 
       //设置定时器,每0.01s跳一次 
       id=window.setInterval(tip,10); 
   }else{ 
       //使按钮文本变为开始 
       this.value="开始"; 
       //使重置按钮可用 
       btnReset.disabled=false; 
       //取消定时 
       window.clearInterval(id); 
   } 
} 
//重置按钮 
btnReset.onclick=function(){ 
   seed=0; 
} 
//让秒表跳一格 
function tip(){ 
   seed++; 
   txt.value=seed/100; 
} 
//--> 
</script>

3. 给定时器调用传递参数

无论是window.setTimeout还是window.setInterval,在使用函数名作为调用句柄时都不能带参数,而在许多场合必须要带参数,这就需要想方法解决。例如对于函数hello(_name),它用于针对用户名显示欢迎信息:

var userName="jack"; 
//根据用户名显示欢迎信息 
function hello(_name){ 
   alert("hello,"+_name); 
}

这时,如果企图使用以下语句来使hello函数延迟3秒执行是不可行的:

window.setTimeout(hello(userName),3000);

这将使hello函数立即执行,并将返回值作为调用句柄传递给setTimeout函数,其结果并不是程序需要的。而使用字符串形式可以达到想要的结果:

window.setTimeout("hello(userName)",3000);

这里的字符串是一段JavaScript代码,其中的userName表示的是变量。但这种写法不够直观,而且有些场合必须使用函数名,下面用一个小技巧来实现带参数函数的调用:

var userName="jack"; 
//根据用户名显示欢迎信息 
function hello(_name){ 
    alert("hello,"+_name); 
} 
//创建一个函数,用于返回一个无参数函数 
function _hello(_name){ 
    return function(){ 
       hello(_name); 
    } 
} 
window.setTimeout(_hello(userName),3000); 
</script>

这里定义了一个函数_hello,用于接收一个参数,并返回一个不带参数的函数,在这个函数内部使用了外部函数的参数,从而对其调用,不需要使用参数。在 window.setTimeout函数中,使用_hello(userName)来返回一个不带参数的函数句柄,从而实现了参数传递的功能。

4. 正确认识定时器的“定时”功能

首先看一段代码

function display(){
  alert(hello);
}
setTimeout("display()", 3000);
alert("你首先看到的是我!")

代码先输出哪个?答案在程序中很明显。为什么呢?

初学者可能对Javascript的定时器有误解,认为它们是线程,其实Javascript是运行于单线程中的,而定时器仅仅是计划在未来的某个时间执行,而具体的执行时间是不能保证的,因为在页面的生命周期中,不同的时间可能有其它代码在控制Javascript的里进程。浏览器只是负责进行排序,指派某个代码在某个时间点运行。

下面说下Javascript线程,下图表示javascript进程时间线。

JavaScript中的定时器之Item23的合理使用

除了javascript执行进程外,还有一个需要在进程下一次空闲时间执行的代码队列,随着页面在其生命周期内的推移,代码会按照执行顺序添加到对列中,例如:当一个按钮被按下时,它的事件处理就会添加到队列中,并在下一个可能的时间内执行。

定时器对队列的工作方式是,当特定的时间过去后,将代码插入,注意添加到队列并不意味着它会马上执行,而只能说它会尽快执行,设定一个250ms后执行的定时器,不代表250ms后它会马上执行,它只会表示在250ms后被加入到队列中,如果这个时间点队列是空闲的,那么这段代码就会被执行。

请看以下代码:

var btn = document.getElementById("mybtn");
  btn.onclick = function () {
    setTimeout(function () {
      document.getElementById("message").nodeName = "mymessage";
      //其它代码
    }, 250);
  }

对于定时器最要注意的是:指定的时间间隔表示何时将定时器的代码添加到队列中,而不是何时执行代码。关于这个onclick事伯处理的进程时间线请看下图:

JavaScript中的定时器之Item23的合理使用

Javascript 相关文章推荐
Maps Javascript
Jan 22 Javascript
基于jQuery图片平滑连续滚动插件
Apr 27 Javascript
jquery判断浏览器类型的代码
Nov 05 Javascript
使用js对select动态添加和删除OPTION示例代码
Aug 12 Javascript
Bootstrap实现下拉菜单效果
Apr 29 Javascript
前端js文件合并的三种方式推荐
May 19 Javascript
深入理解jQuery之事件移除
Jun 02 Javascript
jQuery实现调整表格单列顺序完整实例
Jun 20 Javascript
微信小程序开发之toast提示插件使用示例
Jun 08 Javascript
javascript实现文件拖拽事件
Mar 29 Javascript
详解vue2.0模拟后台json数据
May 16 Javascript
JavaScript的一些小技巧分享
Jan 06 Javascript
javascript字符串替换函数如何一次性全部替换掉
Oct 30 #Javascript
JS实现带提示的星级评分效果完整实例
Oct 30 #Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
Oct 30 #Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
Oct 30 #Javascript
基于jQuery实现的美观星级评论打分组件代码
Oct 30 #Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
Oct 30 #Javascript
自己动手写的javascript前端等待控件
Oct 30 #Javascript
You might like
PHP的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
PHP-Fcgi下PHP的执行时间设置方法
2013/08/02 PHP
php加密解密实用类分享
2014/01/07 PHP
浅析php数据类型转换
2014/01/09 PHP
19个超实用的PHP代码片段
2014/03/14 PHP
利用laravel搭建一个迷你博客实战教程
2017/08/13 PHP
Yii支持多域名cors原理的实现
2018/12/05 PHP
thinkPHP5使用Rabc实现权限管理
2019/08/28 PHP
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
2013/04/26 Javascript
写得不错的jquery table鼠标经过变色代码
2013/09/27 Javascript
js与运算符和或运算符的妙用
2014/02/14 Javascript
javascript时间函数大全
2014/06/30 Javascript
深入剖析JavaScript:Object类型
2016/05/10 Javascript
详解Vue 开发模式下跨域问题
2017/06/06 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
2018/09/17 Javascript
用vue 实现手机触屏滑动功能
2020/05/28 Javascript
JavaScript如何使用插值实现图像渐变
2020/06/28 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
2021/01/29 jQuery
[04:00]黄浦江畔,再会英雄——完美世界DOTA2 TI9应援视频
2019/07/31 DOTA
Python基于scrapy采集数据时使用代理服务器的方法
2015/04/16 Python
Python不使用int()函数把字符串转换为数字的方法
2018/07/09 Python
Python学习笔记之图片人脸检测识别实例教程
2019/03/06 Python
Python使用__new__()方法为对象分配内存及返回对象的引用示例
2019/09/20 Python
美国女士泳装店:Swimsuits For All
2017/03/02 全球购物
香港唯港荟酒店预订:Hotel ICON
2018/03/27 全球购物
介绍一下内联、左联、右联
2013/12/31 面试题
什么是Linux虚拟文件系统VFS
2012/01/31 面试题
日本语毕业生自荐信
2014/02/01 职场文书
小学语文国培感言
2014/03/04 职场文书
党员领导干部承诺书
2014/05/28 职场文书
小学生纪念九一八事变演讲稿
2014/09/14 职场文书
工作失误检讨书(经典集锦版)
2014/10/17 职场文书
给女朋友道歉的话大全
2015/01/20 职场文书
遗失说明具结保证书
2015/02/26 职场文书
MySql开发之自动同步表结构
2021/05/28 MySQL