setTimeout和setInterval

由一個小例子比較setTimeout和setInterval

這幾天本來在看閉包，但突然出現了這兩個函數的使用，我還真沒有仔細比較過這兩個函數。

例：

//使用setTimeout
var fade = function(node){
    var level = 1;
    var step = function(){
        var hex = level.toString(16);
        console.log('#FFFF' + hex + hex);
        node.style.backgroundColor = '#FFFF' + hex + hex;
        if(level < 15){
            level += 1;
            setTimeout(step,100);
        }
    };
    step();
}
fade(document.body);

函數完成了一個背景圖顏色的漸變。

var fade = function(node){
    var level = 1;
    var step = function(){
        var hex = level.toString(16);
        console.log('#FFFF' + hex + hex);
        node.style.backgroundColor = '#FFFF' + hex + hex;
        if(level < 15){
            level += 1;
        }else{
            clearInterval(start);
        }
    };
    var start = setInterval(step,100);
}
fade(document.body);

同樣完成了背景色的漸變，但是，你看出不同了麼？

區別：

setTimeout和setInterval都被用來處理延時和定時任務。區別在於：

1. setTimeout()方法用於在指定毫秒數後調用函數或者表達式，但是隻執行一次。所以如果要處理定時任務，則需要遞歸的調用它。
2. setInterval()方法則可以在每隔指定的毫秒數循環的調用函數或者表達式。如許停止的話，需要調用clearInterval()方法把它清除。

JS是單線程的

由於這個問題，你會發現，這兩個函數並不是精確地定時器，如果你每次執行函數時並打印出當前時間，就會發現，它的時間間隔並不是精確地一致。這是由於JS在設計時就不是多線程的。它其實是單線程的，那麼，在定時時，由於其他的函數執行，那麼定時器會被阻塞，結果就是，時間間隔被延遲了。

1. 仔細研究，可以發現setTimeout()是不規則的定時，它趨向於是在保證瀏覽器佔用它的空餘時間的同時保證時間間隔的一致性。
2. 而setInterval()則更想優先保證時間間隔的一致性。