JavaScript两种定时器详解

绝地灬酷狼 2022-08-06 13:11 226阅读 0赞

### setTimeout ###

1、var timerId=setTimeout(code,millisec)方法用于在指定的毫秒数后调用函数或者计算表达式。其中timerId表setTimeout(code,millisec)的返回值，code表示要执行的代码，我们可以直接传入一个已经定义好的函数，millsec表示执行code前需要等待的时间，以毫秒为单位。

2、setTimeout(code,millsec)这个函数只会执行一次，如果需要多次调用，可以使用setInterval()函数，也可以让code再调用自身的setTimeout()函数。

3、当一个定义器函数启动了以后，我们可以通过返回值timerId来中断这个定时器，其语法是：clearTimeout(timerId),一旦定时器被中断了，这个定义不能被重新恢复执行，只有新开的一个定义器。

4、使用setTimeout()函数来实现在5秒后跳出警告框alert:

### setInterval ###

1、var timerId=setInterval(code,millsec)方法可执照指定的周期(以毫秒计)来调用函数或者计算表达式，其中timerId表示setInterval(code,millsec)的返回值，code表示要执行的代码，可以直接传入一个已经定义好的函数，millsec表示函数执行的周期，以毫秒为单位。

2、setInterval(code,millsec)方法会以millsec为周期不停的调用函数，直到clearInterval()被调用或者窗口被关闭。

3、当setInterval(code,millsec),我们可以通过返回值timerId来中断这个函数，其语法是：clearInterval(timerId)。

4、用setInterval()函数来实时更新网页时间例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>setInterval</title>
    <script type="text/javascript">
    window.οnlοad=function(){
        var oTime=document.getElementById('time');
        var oSuspend=document.getElementById('suspend');
        var oResume=document.getElementById('resume');
        createTime(oTime);//初始化时间
        var timerId=setInterval(function(){//使用定时器刷新时间
             createTime(oTime);       
        },1000);
        oSuspend.οnclick=function(){//中断定时器
           clearInterval(timerId);
        } 
        oResume.οnclick=function(){//重新打开定时器
            timerId=setInterval(function(){//使用定时器刷新时间
                  createTime(oTime);       
            },1000);
        }
    }    
    function createTime(obj){//产生当前时间
           var date=new Date();
           var hours=date.getHours();
           var minutes=date.getMinutes();
           var seconds=date.getSeconds();
           obj.innerHTML=transfer(hours)+":"+transfer(minutes)+":"+transfer(seconds);
    }   
    function transfer(n){//格式化数据
        if(n<10){
            return "0"+n;
        }else{
            return n+"";
        }
    } 
    </script>
    </head>
    <body>
    <div>
      <div id="time"></div>
      <button id="suspend">中断</button>  <button id="resume">重新打开定时器</button>
    </div>  
    </body>
    </html>