javascript的定时器

最新推荐文章于 2022-07-23 12:02:00 发布

原创最新推荐文章于 2022-07-23 12:02:00 发布 · 456 阅读

0 ·

CC 4.0 BY-SA版权

JAVAScript 专栏收录该内容

36 篇文章

订阅专栏

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

它们的原型如下： 
window.setTimeout(expression,milliseconds); 
window.setInterval(expression,milliseconds);

setTimeout(hello,5000);//5秒后执行
    setTimeout('hello()',3000);//3秒后执行
    setTimeout(hello(),8000);//立刻执行

第一种情况是函数名，但是带不了参数

第二种情况是字符串，可执行的js代码，可以带参数，但是性能上比函数名差

第三种是调用函数，直接执行

所以如果想要传参数，但是又不想通过字符串的形式调用，可以自己来写一个方法：

function _hello(_name){ 
        return function(){ 
            hello2(_name); 
        } 
    }

setTimeout(_hello(name),7000);//立刻执行

当使用setInterval时,仅当(在队列中)没有该定时器的任何其他代码实例时,才将定时器代码添加到队列中,引用JavaScript高级程序设计第二版书中语句
(即：当前一个定时器代码执行时,紧跟后面的第一个定时器代码将添加到队列中,等待执行,再后面的定时器代码不会添加到队列中)

用setInterval来执行反复的行为的时候会遇到一个问题：

当定时器代码执行时间(假如需要600ms才执行完)超过指定间隔(这里是200ms),那么某些定时器代码就会被跳过(即后面的定时器代码不会被添加到队列中),前一个定时器代码执行完毕后,队列中的定时器代码立刻执行,各定时器之间的代码执行没有间隔。这时，需要使用链式setTimeout。

这样做的好处是:前一个定时器要执行的代码执行完且等待200ms后,才创建一个新的定时器,并把定时器代码添加到队列中执行
即：不会出现定时器代码被跳过的情况;定时器之间的代码执行可以有间隔(根据自己设置)。

setTimeout( function (){

//要执行的代码

setTimeout(arguments.callee,2000);

},2000);

setInterval( function (){

//要执行的代码

},200);

略举两例。
例1.表单触发或加载时，逐字输出字符串

复制代码代码如下:

 
 <html>
 
 <head>
 
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 
 <title>无标题文档</title>
 
 <script language="JavaScript" type="text/javascript">
 
 var str = "这个是测试用的范例文字";
 
 var seq = 0;
 
 var second=1000; //间隔时间1秒钟
 
 function scroll() {
 
 msg = str.substring(0, seq+1);
 
 document.getElementByIdx_x_x('word').innerHTML = msg;
 
 seq++;
 
 if (seq >= str.length) seq = 0;
 
 }
 
 </script>
 
 </head>
 
 <body οnlοad="setInterval('scroll()',second)">
 
 <div id="word"></div><br/><br/>
 
 </body>
 
 </html>

例2.当焦点在输入框的时候，定时检查输入框信息，焦点不在时不执行检查动作。

复制代码代码如下:

 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 <html xmlns="http://www.w3.org/1999/xhtml">
 
 <head>
 
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 
 <title>无标题文档</title>
 
 <script language="JavaScript" type="text/javascript">
 
 var second=5000; //间隔时间5秒钟
 
 var c=0;
 
 function scroll() {
 
 c++;
 
 if ("b" == document.activeElement.id) {
 
 var str="定时检查第<b> "+c+" </b>次<br/>";
 
 if(document.getElementByIdx_x_x('b').value!=""){
 
 str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";
 
 }
 
 document.getElementByIdx_x_x('word').innerHTML = str;
 
 }
 
 }
 
 </script>
 
 </head>
 
 <body>
 
 <textarea id="b" name="b" style="height:100px; width:300px;" οnfοcus="setInterval('scroll()',second)"></textarea><br/><br/>
 
 <div id="word"></div><br/><br/>
 
 </body>
 
 </html>

例3.下面这个是最简单的例子，定时器时间到达后弹出警告窗口。

复制代码代码如下:

 
 <html xmlns="http://www.w3.org/1999/xhtml">
 
 <head>
 
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 
 <script language="javascript">
 
 function count() {
 
 document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";
 
 setTimeout("alert('十秒钟到！')",10000)
 
 }
 
 </script>
 
 <body>
 
 <div id="m"></div>
 
 <input TYPE="button" value=" 计时开始" οnclick="count()">
 
 </body>
 
 </html>

例4:倒计时定时跳转

复制代码代码如下:

 
 <html>
 
 <head>
 
   <base href="<%=basePath%>">
 
   <title>My JSP 'ds04.jsp' starting page</title>
 
   <span id="tiao">3</span>
 
   <a href="javascript:countDown"> </a>秒后自动跳转……
 
   <meta http-equiv=refresh content=3;url= '/ds02.jsp'/>
 
   <!--脚本开始-->
 
   <script language="javascript" type="">
 
 function countDown(secs){
 
  tiao.innerText=secs;
 
  if(--secs>0)
 
   setTimeout("countDown("+secs+")",1000);
 
  }
 
  countDown(3);
 
  </script>
 
   <!--脚本结束-->
 
  </head>

例6:

复制代码代码如下:

 
 <head> 
 
     <meta http-equiv="refresh" content="2;url='b.html'"> 
 
 </head>

例7:

复制代码代码如下:

 
 <script language="javascript" type="text/javascript">
 
  setTimeout("window.location.href='b.html'", 2000);
 
  //下面两个都可以用
 
  //setTimeout("javascript:location.href='b.html'", 2000);
 
  //setTimeout("window.location='b.html'", 2000);
 
 </script>

例8:

复制代码代码如下:

 
 <span id="totalSecond">2</span>
 
 <script language="javascript" type="text/javascript">
 
  var second = document.getElementByIdx_x('totalSecond').innerHTML;
 
  if(isNaN(second)){
 
   //……不是数字的处理方法
 
  }else{
 
   setInterval(function(){
 
    document.getElementByIdx_x('totalSecond').innerHTML = --second;
 
    if (second <= 0) {
 
     window.location = 'b.html';
 
    }
 
   }, 1000);
 
  } 
 
 </script>

js定时器(执行一次、重复执行)

分享一段js代码，有关js定时器的小例子，分为执行一次的定时器与重复执行的定时器。供初学的朋友参考。

1，只执行一次的定时器

复制代码代码如下:

 
 <script>  
 
 //定时器 异步运行  
 
 function hello(){  
 
     alert("hello");  
 
 }  
 
 //使用方法名字执行方法  
 
 var t1 = window.setTimeout(hello,1000);  
 
 var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法  
 
 window.clearTimeout(t1);//去掉定时器  
 
 </script>

2，重复执行的定时器

复制代码代码如下:

 
 <script>  
 
 function hello(){  
 
     alert("hello");  
 
 }  
 
 //重复执行某个方法  
 
 var t1 = window.setInterval(hello,1000);  
 
 var t2 = window.setInterval("hello()",3000);  
 
 //去掉定时器的方法  
 
 window.clearInterval(t1);  
 
 </script>

备注：

如果在一个页面中有两个方法，都是在页面加载完成之后执行的，实际却未能按先后顺序执行，可以参照如下方法解决：
可以在onload方法中添加一个定时器，设置一个定时器，“延迟”一段时间之后再运行，即可认为区分页面加载运行方法的先后顺序。

复制代码代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        延迟器的使用：</div>
    <div>
     <label id="Label2" title="延迟秒数："></label>
        <input type="text" id="txtYCSeconds" value="3" />
        <input type="button" id="btnBYC" οnclick="javascript:beginYC()" value="开始延迟" />
        <input type="button" id="btnOYC" οnclick="javascript:overYC()" value="终止延迟" />
        <input type="button" id="Button1" οnclick="javascript:alert('good monrning');" value="普通弹窗" />
    </div>
    <br />
    <div>
        定时器的使用：</div>
    <div>
    <div id="sn">0</div>
    <label id="Label1" title="定时间隔秒数："></label>
        <input type="text" id="txtIntervalSeconds" value="1" />
        <input type="button" id="btnBDS" οnclick="javascript:beginDS()" value="启动定时" />
        <input type="button" id="btnODS" οnclick="javascript:overDS()" value="终止定时" />
        <input type="button" id="btnGDS" οnclick="javascript:goonDS()" value="继续定时" />

        <label id="ds" title="延迟秒数："></label>
        <input type="text" id="txtDDSSeconds" value="5" />
        <input type="button" id="btnDDS" οnclick="javascript:delayDS()" value="延迟定时" />

        </div>
    </form>
</body>
</html>