【面向JS--定時器】

原創

hf_872914334

2020-02-22 11:22

定時器分爲週期性定時器和一次性定時器

週期性定時器: 讓程序每隔一段時間間隔，反覆執行一項任務

如何使用: 3步：

1、聲明任務函數: 定時器每次執行的任務
    function task(){...}
    任務函數通常要自己考慮:何時停止定時器的臨界值

2、將任務函數放入定時器，定時執行:
    timer=setInterval(task,interval)
    其中: interval 是間隔的毫秒數
         timer往往是一個全局變量: 用來保存當前定時器的序號
         序號是內存中唯一標識一項任務的編號
    原理：首先將task函數對象和interval時間間隔記錄在定時器對象中，再返回當前任務的序號
    然後，定時器會按照指定時間間隔，將task函數定時加入回調隊列(callback queue)中。
    只有ECS中沒有正在執行的函數時，纔將callbackqueue中的函數加入ECS中執行
3、停止定時器:
    clearInterval(timer);//根據序號關閉定時器

一次性定時器: 先等待一段時間，再自動執行一次任務

如何使用: 3步：

1、聲明任務函數: 
    function task(){...}
2、啓動一次性定時器
    timer=setTimeout(task,wait)
    其中: wait是等待的毫秒數
3、停止一次性定時器: 其實是停止等待，不再執行任務
    clearTimeout(timer);
    timer=null;

其實: 一次性定時器連續啓動，也可實現週期性的效果
區別: 任務函數的結尾: 
     週期性定時器任務: 判斷何時停止定時器
     一次性定時器任務: 判斷何時啓動定時器

<!DOCTYPE html>
<html>
 <head>
  <title>倒計時</title>
  <meta charset="utf-8"/>
 </head>

 <body>
    <h1>元旦倒計時：<span id="time"></span></h1>
    <button id="btn">||</button>
<script>
    var span=document.getElementById("time");
    function task(){
        var now=new Date();
        var Y = now.getFullYear()+1;
        var target=new Date(Y+"/01/01");
        var s=parseInt((target-now)/1000);
        if(s>0){//有一秒延遲
            var days=parseInt((s/3600/24));
            var hs=parseInt(s/3600%24);
            var ms=parseInt(s/60%60);
            var ss=s%60;
            span.innerHTML=`${days}天${hs}小時${ms}分${ss}秒`;
        }else{
            clearIntserval(timer);
            span.innerHTML=`元旦快樂`;
        }
    }
    var timer=setInterval(task,1000);//("task();",1000);
    var btn=document.getElementById("btn");
    btn.οnclick=function(){
        if(this.innerHTML=="||"){
            clearInterval(timer);
            this.innerHTML="|>";
        }else{
            timer=setInterval(task,1000);
            this.innerHTML="||";
        }
    }
</script>
 </body>
</html>

注意：無論是 setInterval 還是 setTimeout，在函數的執行隊列裏，永遠在最後執行，哪怕他寫在前面

function test(){
    setTimeout(function(){console.log("timeout")},0);
    for(var i=0;i<5;i++){
        setTimeout(function(){console.log(i)},1000);
    }
}
test();
//5
//5
//5
//5
//5
//timeout