JavaScript两种定时器详解

最新推荐文章于 2023-04-27 16:39:30 发布

回_憶

最新推荐文章于 2023-04-27 16:39:30 发布

阅读量1k

点赞数

分类专栏： JavaScript 文章标签： JavaScript setTimeout setInterval 定时器

本文链接：https://blog.csdn.net/angjunqiang/article/details/43190671

版权

JavaScript 专栏收录该内容

18 篇文章 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:

<!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>setTimeout</title>
<script type="text/javascript">
window.οnlοad=function(){
   var oSuspend=document.getElementById('suspend');
   /*setTimeout()调用函数有两种写法,注意这里两种方式为调用函数传入参数的方式*/
   //var timerId=setTimeout(alertMsg,5000,new Date());
   //var timerId=setTimeout("alertMsg(new Date())",5000);
   /*使用匿名函数方式*/
   var timerId=setTimeout(function(){//开启定时器
       alertMsg(new Date());
   },5000);
   oSuspend.οnclick=function(){//中断定时器
      clearInterval(timerId);
   }
} 
   function alertMsg(obj){
       alert(obj);
   }
</script>
</head>
<body>
<button id="suspend">中断定时器</button>
</body>
</html>

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>