JavaScript定时器详解及实例

这篇文章详细介绍了JavaScript定时器及实例,有需要要的朋友可以参考一下
 

JS里设定延时:
使用SetInterval和设定延时函数setTimeout 很类似。setTimeout 运用在延迟一段时间,再进行某项操作。
setTimeout("function",time) 设置一个超时对象
setInterval("function",time) 设置一个超时对象
SetInterval为自动重复,setTimeout不会重复。
clearTimeout(对象) 清除已设置的setTimeout对象
clearInterval(对象) 清除已设置的setInterval对象
使用定时器实现JavaScript的延期执行或重复执行
window对象提供了两个方法来实现定时器的效果,分别是window.setTimeout()和window.setInterval。其中前者可以使一段代码在指定时间后运行;而后者则可以使一段代码每过指定时间就运行一次。它们的原型如下:
window.setTimeout(expression,milliseconds);
window.setInterval(expression,milliseconds);
其 中,expression可以是用引号括起来的一段代码,也可以是一个函数名,到了指定的时间,系统便会自动调用该函数,当使用函数名作为调用句柄时, 不能带有任何参数;而使用字符串时,则可以在其中写入要传递的参数。两个方法的第二个参数是milliseconds,表示延时或者重复执行的毫秒数。下 面分别介绍两种方法。
1.window.setTimeout方法
该方法可以延时执行一个函数,例如:

复制代码 代码如下:

<script language="JavaScript" type="text/javascript">
<!--
function hello(){
alert("hello");
}
window.setTimeout(hello,5000);
//-->
</script>

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

复制代码 代码如下:

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

读者可以体会它们的差别,在window.setInterval方法中也有这样的性质。
如果在延时期限到达之前取消延执行,可以使用window.clearTimeout(timeoutId)方法,该方法接收一个id,表示一个定时器。这个id是由setTimeout方法返回的,例如:

复制代码 代码如下:

<script language="JavaScript" type="text/javascript">
<!--
function hello(){
      alert("hello");
}
var id=window.setTimeout(hello,5000);
document.onclick=function(){
     window.clearTimeout(id);
}
//-->
</script>

这样,如果要取消显示,只需单击页面任何一部分,就执行了window.clearTimeout方法,使得超时操作被取消。
2.window.setInterval方法
该 方法使得一个函数每隔固定时间被调用一次,是一个很常用的方法。如果想要取消定时执行,和clearTimeout方法类似,可以调用 window.clearInterval方法。clearInterval方法同样接收一个setInterval方法返回的值作为参数。例如:

复制代码 代码如下:

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

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

复制代码 代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<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>

7.4.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表示的是变量。但这种写法不够直观,而且有些场合必须使用函数名,下面用一个小技巧来实现带参数函数的调用:

复制代码 代码如下:

<script language="JavaScript" type="text/javascript">
<!--
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)来返回一个不带参数的函数句柄,从而实现了参数传递的功能。
window对象有两个主要的定时方法,分别是setTimeout 和 setInteval 他们的语法基本上相同,但是完成的功能取有区别。
setTimeout方法是定时程序,也就是在什么时间以后干什么。干完了就拉倒。
setInterval方法则是表示间隔一定时间反复执行某操作。
JS里设定延时:
使用SetInterval和设定延时函数setTimeout 很类似。setTimeout 运用在延迟一段时间,再进行某项操作。
setTimeout("function",time) 设置一个超时对象
setInterval("function",time) 设置一个超时对象
SetInterval为自动重复,setTimeout不会重复。
clearTimeout(对象) 清除已设置的setTimeout对象
clearInterval(对象) 清除已设置的setInterval对象
        如果用setTimeout实现setInerval的功能,就需要在执行的程序中再定时调用自己才行。如果要清除计数器需要根据使用的方法不同,调用不同的清除方法:
例如:

复制代码 代码如下:

tttt=setTimeout('northsnow()',1000);
clearTimeout(tttt);

或者:

复制代码 代码如下:

tttt=setInterval('northsnow()',1000);
clearInteval(tttt);

举一个例子:

复制代码 代码如下:

<div id="liujincai"></div>
<input type="button" name="start" value="start" onclick='startShow();'>
<input type="button" name="stop" value="stop" onclick="stop();">
<script language="javascript">
   var intvalue=1;
   var timer2=null;
   function startShow()
   {
      liujincai.innerHTML=liujincai.innerHTML + " " + (intvalue ++).toString();
      timer2=window.setTimeout("startShow()",2000);
   }
   function stop()
   {
      window.clearTimeout(timer2);
   }
</script>

或者:

复制代码 代码如下:

<div id="liujincai"></div>
<input type="button" name="start" value="start" onclick='timer2=window.setInterval("startShow()",2000);//startShow();'>
<input type="button" name="stop" value="stop" onclick="stop();">
<script language="javascript">
   var intvalue=1;
   var timer2=null;
   function startShow()
   {
      liujincai.innerHTML=liujincai.innerHTML + " " + (intvalue ++).toString();
   }
   function stop()
   {
      window.clearInterval(timer2);
   }
</script>

时间: 2016-08-02

JavaScript定时器详解及实例的相关文章

JavaScript定时器详解

 在javascritp中,有两个关于定时器的专用函数,它们是: 1.倒计定时器:timename=setTimeout("function();",delaytime); 2.循环定时器:timename=setInterval("function();",delaytime); function()是定时器触发时要执行的是事件的函数,可以是一个函数,也可以是几个函数,或者javascript的语句也可以,单要用;隔开:delaytime则是间隔的时间,以毫秒为单

Android 混淆代码详解及实例

  Android 混淆代码详解及实例         为了防止自己的劳动成果被别人窃取,混淆代码能有效防止被反编译,下面来总结以下混淆代码的步骤: 1. 大家也许都注意到新建一个工程会看到项目下边有这样proguard-project.txt一个文件,这个对混淆代码很重要,如果你不小心删掉了,没关系,从其他地方拷贝一个过来 2. 最重要的就是在proguard-project.txt添加混淆的申明了: a. 把所有你的jar包都申明进来,例如: -libraryjars libs/apns_1

JS高级调试技巧:捕获和分析 JavaScript Error详解_javascript技巧

反正只要 JavaScript 出错后刷新不复现,那用户就可以通过刷新解决问题,浏览器不会崩溃,当没有发生过好了.这种假设在 Single Page App 流行之前还是成立的.现在的 Single Page App 运行一段时间后状态复杂无比,用户可能进行了若干输入操作才来到这里的,说刷新就刷新啊?之前的操作岂不要完全重做?所以我们还是有必要捕获和分析这些异常信息的,然后我们就可以修改代码避免影响用户体验. 捕获异常的方式 我们自己写的 throw new Error() 想要捕获当然可以捕获

Angular2 多级注入器详解及实例_AngularJS

angular2 的依赖注入包含了太多的内容,其中的一个重点就是注入器,而注入器又非常难理解,今天我们不深入介绍注入器的内容,可以参考官方文档,我们今天来说注入器的层级. 也就是组件获取服务的容器会选择具体哪一个. 先简单介绍一个背景:有3个组件AppComponent 根组件.DetailList组件 ( 日志列表组件).Detail组件( 日志组件). 这三个组件会形成一个组件树,对应的我们也可以认为每个组件都会有一个独立的注入器(有时候不会出现,但是可以这么认为). 加入一个日志服务Log

PHP 等比例缩放图片详解及实例代码_php技巧

直接上代码,imgzip($src,$newwid,$newhei)这个函数带进去的分别是原图片.缩放要求的宽度.缩放的长度.代码都备注了,不懂可以留言哈哈 <?php //压缩图片 缩略图 $src= "xiezheng.jpg"; $newwid=640; $newhei= 480; function imgzip($src,$newwid,$newhei){ $imgInfo = getimagesize($src); $imgType = image_type_to_ex

Angular ng-class详解及实例代码_AngularJS

 在前面Angularjs开发一些经验总结中我们说到在angular开发中angular controller never 包含DOM元素(html/css),在controller需要一个简单的POJO(plain object javascript object),与view完全的隔离(交互angularjs框架的职责.但在某些项目中看见controller涉及DOM的元素最多的是在controller scope上定义某变量,其值为class name,形如: function ctr($

Java 反射机制详解及实例代码_java

Java反射详解 本篇文章依旧采用小例子来说明,因为我始终觉的,案例驱动是最好的,要不然只看理论的话,看了也不懂,不过建议大家在看完文章之后,在回过头去看看理论,会有更好的理解. 下面开始正文. [案例1]通过一个对象获得完整的包名和类名 package Reflect; /** * 通过一个对象获得完整的包名和类名 * */ class Demo{ //other codes... } class hello{ public static void main(String[] args) {

Android 文件选择器详解及实例代码_Android

     本文给大家讲解下Android文件选择器的使用.实际上就是获取用户在SD卡中选择的文件或文件夹的路径,这很像C#中的OpenFileDialog控件.        此实例的实现过程很简单,这样可以让大家快速的熟悉Android文件选择器,提高开发效率.        网上曾经见到过一个关于文件选择器的实例,很多人都看过,本实例是根据它修改而成的,但更容易理解,效率也更高,另外,本实例有自己的特点:        1.监听了用户按下Back键的事件,使其返回上一层目录.       

Android App增量更新详解及实例代码_Android

Android App增量更新实例--Smart App Updates        介绍 你所看到的,是一个用于Android应用程序增量更新的开源库. 包括客户端.服务端两部分代码. 原理 自从 Android 4.1 开始,Google引入了应用程序的增量更新. Link: http://developer.android.com/about/versions/jelly-bean.html Smart app updates is a new feature of Google Pla