內(nèi)容是《Web前端開發(fā)之Javascript視頻》的課件，請配合大師哥《Javascript》視頻課程學(xué)習(xí)。

計時器：

Javascript是單線程語言，但它允許通過設(shè)置超時和間歇時間值來調(diào)度代碼在特定的時刻執(zhí)行；其是通過setTimeout()和setInterval()兩個window對象的全局函數(shù)實現(xiàn)的，用來注冊在指定的時間之后單次或重復(fù)調(diào)用的函數(shù)；

setTimeout()：

延遲代碼執(zhí)行（也叫超時調(diào)用）：用來實現(xiàn)一段代碼在指定的毫秒之后運行；

語法：window.setTimeout(code,delay)，code要執(zhí)行的代碼，可以是一個包含Javascript的代碼字符串，也可以是一個函數(shù)，delay等待的毫秒數(shù)；

// 不建議傳遞字符串
setTimeout("alert('zeronetwork')",3000);
// 推薦的使用方式
setTimeout(function(){
    alert('zeronetwork');
},3000);
// 推薦的使用方式
setTimeout(show,3000);
function show(){
    alert('zeronetwork');
}

因為歷史原因，第一個參數(shù)可以傳遞字符串，但有可能導(dǎo)致性能損失，因為這個字符串會在指定的超時時間之后進(jìn)行求值，相當(dāng)于執(zhí)行eval()，因此不推薦使用字符串的形式；

// 能達(dá)到無限循環(huán)的目的
var n = 0;
function fun(){
    n++;
    console.log(n);
    setTimeout(fun, 1000);
}
fun();  // 直接執(zhí)行
setTimeout(fun,3000);

第二個參數(shù)是一個表示等待多長時間的毫秒數(shù)，但經(jīng)過該時間后指定的代碼并不一定會執(zhí)行；Javascript是一個單線程的解釋器，因此一定時間內(nèi)只能執(zhí)行一段代碼；為了控制要執(zhí)行的代碼，就有一個Javascript任務(wù)隊列，這些任務(wù)會執(zhí)照將它們添加到隊列的順序執(zhí)行；這個參數(shù)實際上是告訴Javascript再過多長時間把當(dāng)前任務(wù)添加到隊列中，如果隊列是空的，那么添加的代碼會立即執(zhí)行，如果隊列不是空的，那么它就要等前面的代碼執(zhí)行完畢后再執(zhí)行；

另外，如果該參數(shù)為0，也并不一定會立即執(zhí)行，因為也需要將它放到隊列中，等待前面的任務(wù)全部執(zhí)行完后，才會“立即”執(zhí)行；

setTimeout()方法會返回一個數(shù)字ID，ID本質(zhì)上是要延遲進(jìn)程的ID，是計劃執(zhí)行代碼的唯一標(biāo)識符；可以使用clearTimeout()方法，調(diào)用此ID，達(dá)到取消超時調(diào)用的目的；

var timeoutid = setTimeout(function(){
    alert("zeronetwork");
},3000);
console.log(timeoutid);
clearTimeout(timeoutid);

只要是在指定的時間尚未過去之前調(diào)用clearTimeout()，就可以完全取消超時調(diào)用；

<input type="button" value="開始" onclick="showClock()" />
<input type="button" value="取消" onclick="window.clearTimeout(ident)" />
<div id="showtime">time</div>
<script>
function showClock(){
    var d = new Date();
    var showtime = document.getElementById("showtime");
    showtime.innerHTML = d.toLocaleString();
    // ident = setTimeout(showClock(), 1000);
    ident = setTimeout("showClock()", 1000);
}
</script>

示例：可以利用 clearTimeout() 方法在特定條件下清除延遲處理代碼。例如，當(dāng)鼠標(biāo)指針移過某個元素，停留半秒鐘之后才會彈出提示信息，一旦鼠標(biāo)指針移出當(dāng)前元素，就立即清除前面定義的延遲處理函數(shù)，避免干擾；

<h1>零點網(wǎng)絡(luò)</h1>
<div>零點教育是從事IT教育</div>
<p>主講：零點網(wǎng)絡(luò)</p>
<script>
var o = document.getElementsByTagName('body')[0].childNodes;
for(var i=0; i<o.length; i++){
    o[i].onmouseover = function(i){
        return function(){
            f(o[i]);
        }
    }(i);
    o[i].onmouseout = function(i){
        return function(){
            clearTimeout(o[i].out);
        }
    }(i);
}
function f(o){
    o.out = setTimeout(function(){
        console.log(o.tagName + ":" + o.innerText);
    },500);
}
</script>

除前兩個參數(shù)之外，HTML5規(guī)范還允許setTimeout()傳入額外的參數(shù)，并在調(diào)用函數(shù)時把這些參數(shù)傳遞過去；

setTimeout(function(str,age){
    alert(str + "age:" + age);
},3000,"wangwei",18);

時間間隔setInterval()：

代碼延遲執(zhí)行機(jī)制在執(zhí)行一次后就失效，而在應(yīng)用中，有時希望某個程序能反復(fù)執(zhí)行，比如說倒計時等，需要每秒執(zhí)行一次；為此可以使用window方法的setInterval方法，其會按照指定的時間間隔重復(fù)執(zhí)行代碼，直到取消或頁面被卸載；其與setTimeout()類似，參數(shù)也一致；

// 不建議使用字符串
setInterval("console.log('zero')", 3000);
// 推薦的方式
setInterval(function(){
    console.log('zero');
},3000);
 
function timer(){
    var d = new Date();
    document.getElementById("result").innerText = d.toLocaleTimeString();
}
setInterval(timer,1000);
 
// 輸出的時間并不精確，并不是整1000毫秒
var firstTime = new Date().getTime();
setInterval(function(){
    var lastTime = new Date().getTime();
    console.log(lastTime - firstTime);
    // alert("ok");  // 會暫停
    firstTime = lastTime;
},1000);
同setTimeout()一樣，setInterval()也支持第三個參數(shù)；

取消間隔性執(zhí)行代碼：

使用setInterval()方法同樣會返回一個間隔調(diào)用ID，該ID可用于在將來某個時間取消間隔調(diào)用；可以使用clearInterval方法移除間隔調(diào)用，其接收一個計時器ID作為參數(shù)；

// 如果不使用它的返回值，可以直接使用數(shù)字1、2...
var i = 0;
setInterval(function(){
    console.log(i++);
    if(i>10)
        clearInterval(1);
},1000);

取消間隔調(diào)用的重要性要遠(yuǎn)遠(yuǎn)高于取消超時調(diào)用，因為在不取消的情況下，間隔調(diào)用將會一直執(zhí)行到頁面卸載；

var num = 0, max = 10;
var intervalId = null;
function incNum(){
    num++;
    console.log(num);
    // 如果執(zhí)行次數(shù)達(dá)到了max設(shè)定的值，則取消后續(xù)的調(diào)用
    if(num == max){
        clearInterval(intervalId);
        alert("結(jié)束");
    }
}
intervalId = setInterval(incNum, 1000);
 
// 另外
var mInput = document.getElementsByTagName('input')[0];
var sInput = document.getElementsByTagName('input')[1];
var m = 4,s = 52;
var timer = setInterval(function(){
    s++;
    if(s == 60){
        s = 0;
        m++;
    }
    sInput.value = s;
    mInput.value = m;
    if(m == 5)
        clearInterval(timer); 
},1000);

setTimeout()與setInterval()同時使用時，其返回的id也會按順序返回；

在某些時候 setTimeout()與 setInterval() 可以實現(xiàn)同樣的效果；

var num = 0, max = 10;
function incNum(){
    num++;
    console.log(num);
    // 如果執(zhí)行次數(shù)達(dá)到了max設(shè)定的值，則取消后續(xù)的調(diào)用
    if(num < max){
        setTimeout(incNum, 1000)
    }else{
        alert("結(jié)束");
    }
}
setTimeout(incNum, 1000);

在使用超時調(diào)用時，沒有必要使用超時調(diào)用ID，因為每次執(zhí)行代碼之后，如果不再設(shè)置另一次超時調(diào)用，調(diào)用就會自動停止；

一般認(rèn)為，使用延遲代碼來模擬時間間隔是一種最佳方式；在開發(fā)環(huán)境中，很少使用時間間隔，因為時間間隔可能會在前一個間隔調(diào)用結(jié)束之前啟動，而延遲代碼完全可以避免這一點；

<div id="loadBar" style="border: red 1px solid;"></div>
<script>
var num = 0;
var colors = ['#494949','#646464','#747474','#888888','#969696','#A8A8A8','#B6B6B6','#C6C6C6','#D7D7D7','#E1E1E1','#F0F0F0','#F9F9F9'];
function loading(){
    num++;
    var loadBar = document.getElementById("loadBar");
    loadBar.style.color = colors[num-1];
    loadBar.innerHTML = loadBar.innerHTML + "■";
    if(num < 12){
        setTimeout(loading, 1000);
    }else{
        loadBar.style.display = "none";
        window.open("https://www.zeronetwork.cn/","new");
    }
}
window.onload = loading;
</script>
 
/*
定時器應(yīng)用函數(shù) invoke 
如果只傳遞f,start，則使用setTimeout
如果沒有傳遞end,則永久循環(huán)執(zhí)行f，否則在end后停止
*/
function invoke(f, start, interval, end){
    if(!start) start = 0;  // 默認(rèn)設(shè)置為0毫秒
    if(arguments.length <= 2)  // 單次調(diào)用模式
        setTimeout(f, start); 
    else{                   // 多次調(diào)用模式
        setTimeout(repeat, start);  // 若干秒后調(diào)用repeat()
        function repeat(){
            var h = setInterval(f, interval);  // 循環(huán)調(diào)用f()
            // 在end毫秒后停止調(diào)用，前提是end已經(jīng)定義了
            if(end){
                setTimeout(function(){
                    clearInterval(h);
                }, end);
            }
        }
    }
}
invoke(function(){
    console.log("wangwei");
},1000,2000,5000);