javascriptのsetTimeout和setInterval

間歇調用和超時調用

javaScript是單線程語言,但它允許通過設置超時值和間歇時間值來調度代碼在特定的時刻執行.牽着在制定的事件過後執行代碼,而後者則是每間隔指定的時間就執行一次代碼.
超時調用需要使用window對象的setTimeout()方法,它接受兩個參數:要執行的代碼和毫秒數的超時時間.

function box() {
    alert('Lee');
}
setTimeout(box, 1000);   //直接傳入函數名即可

setTimeout(function() {   //推薦做法
    alert('Lee');
},1000);

PS:直接使用函數傳入的方法,擴展性好,性能更佳.

var box = setTimeout(function() {  //把超時調用的ID複製給box
    alert('Lee');
},1000);    

clearTimeout(box);          //把ID傳入,取消超時調用

var i = 1;
var timer = setInterval(function() {
    alert(i++);
}, 2000);

爲了確保兩次之間由固定的間隔,不使用setInterval

var i=1;
var timer = setTimeout(function() {
    alert(i++);
    timer = setTimeout(arguments.callee, 2000);
}, 2000);

自己部署一個函數,實現間隔時間確定的setInterval

function interval(func, wait){
    var interv = function(){
        func.call(null);
        setTimeout(interv, wait);
    };
    setTimeout(interv, wait);
}

interval(function(){
    console.log(2);
}, 1000);

setTimeout和setInterval指定的任務，一定會按照預定時間執行。它們實際上要等到當前腳本的所有同步任務執行完，然後再等到本次Event Loop的“任務隊列”的所有任務執行完，纔會開始執行

---

間歇調用

間歇調用與超時調用類似,只不過它會按照指定的時間間隔重複執行代碼,直至間歇調用被取消或者頁面被卸載。設置間歇調用的方法是 setInterval(),它接受的參數與 setTimeout()相同:要執行的代碼和每次執行之前需要等待的毫秒數。

var box = setInterval(function() {   //獲取間歇調用的ID
    alert('Lee');
},1000);

clearInterval(box);  //取消間歇調用

---

一般認爲,使用超時調用來模擬間歇調用是一種最佳模式。在開發環境下,很少使用真正的間歇調用,因爲需要根據情況來取消 ID,並且可能造成同步的一些問題,我們建議不使用間歇調用,而去使用超時調用。

var num = 0;
var max = 5;

function box() {
    num++;
    document.getElemetById('a').innerHTML += num;
    if(num == max) {
        alert('5秒到了');
    }else {
        setTimeout(box, 1000);
    }
}

setTimeout(box, 1000);

---

應用:
setTimeout(f, 0):調整事件發生順序.它實際上意味着,將任務放在瀏覽器最早可得的空閒時段執行,所以那些計算量大、耗時昌的任務,常常會被放到幾個小部分,分別放到setTimeout(f,0)裏面執行.

var div = document.getElementsByTagName('div')[0];

//寫法一
for(var i=0xA00000;i<0xFFFFFF;i++) {
    div.style.backgroundcolor = '#'+i.toString(16);
}

//寫法二
var timer;
var i=0x100000;

function func() {
    timer = setTimeout(func, 0);
    dic.style.backgroundcolor = '#'+i.toSting(16);
    if(i++ == 0xFFFFFF) clearInterval(timer);
}
timer = setTimeout(func, 0);