前幾天翻書，看到“避免雙重求值”一節時有提到settimeout()、setinterval() 建議傳入函式而不是字串以作為第一個引數，所以這裡總結一下settimeout()和setinterval()的區別，以及它們之間的相互模擬。

　　setTimeout()： 方法用於在指定的毫秒數後呼叫函式或計算表示式(函式更好，下面會解釋為什麼函式更好！)。

　　語法：setTimeout(code,millisec)　　　　code：必需，要呼叫的函式後要執行的 JavaScript 程式碼串；millisec：必需，在執行程式碼前需等待的毫秒數。

　　setInterval() ：方法用於按照指定的週期

　　語法：setInterval(code,millisec[,"lang"])　　code：必需，要呼叫的函式或要執行的JavaScript 程式碼串；millisec：必須，週期性執行或呼叫 code 之間的時間間隔，以毫秒計。

　　從上面的定義可以看出，setTimeout(表示式,延時時間)在執行時,是在載入後延遲指定時間後,去執行一次表示式,次數是一次；而 setInterval(表示式,時間間隔

var intervalNum = 0, timeoutNum =0;
function testsetInterval(){
    var date = new Date();
    console.log(date.getSeconds());
    console.log("setInterval", intervalNum++);
}
function testsetTimeout(){
    var
 
 date = new Date();
    console.log(date.getSeconds());
    console.log("setTimeout", timeoutNum++);
}
function testFuntion() {
    setInterval(function () {
        testsetInterval()
    },4000);  //每4秒執行testsetInterval()一次
    setTimeout(function () {
        testsetTimeout()
    },10000);  //延遲10秒執行testsetTimeout()一次，只執行一次；單獨的setTimeout()方法，需要有另外的方法去觸發，如將其放在 body 的 onload事件方法內
}

　　從圖中的結果可以看出，setInterval() 每4秒迴圈執行一次；然而setTimeout()在延遲10秒(37+10)，執行一次後，再沒執行！

　　雖然兩者不一樣，但是卻可以相互模擬。具體使用那個，以具體的需求和場景具體分析，就像for迴圈可以模擬所有的迴圈一樣(包括分支，以及do while一樣)。一般情況下 setTimeout() 用於延遲執行某方法或功能；setInterval() 則一般用於重新整理表單，對於一些表單的假實時指定時間重新整理同步。

　　模擬 setInterval() ：將 setTimeout() 包含在一個執行函式A中，而setTimeout() 自己的code執行函式又是A，然後在函式A外將函式A執行一次，即達到了迴圈執行的目的。

var intervalNum = 0;
function testsetInterval() {
    var date = new Date();
    console.log(date.getSeconds());
    console.log("setInterval", intervalNum++);
}
function recursive() {
    testsetInterval();
    setTimeout(function () {
        recursive()      //遞迴，每隔4秒呼叫一次recursive()
    }, 4000)
}
function testFuntion() {
    recursive();        //在方法recursive外，呼叫一次recursive,以啟動迴圈呼叫！
}

　　迴圈執行，和setInterval()功能相同

　　模擬 setTimeout()：用 setInterval() 模擬 setTimeout() 很簡單，在 setInterval() 執行一次後，立刻關閉視窗(當然這是耍無賴)或者執行 clearInterval() 方法(這個靠譜點)。clearInterval() 需要在 setInterval()執行code方法內或其他地方執行，不能緊接著 setInterval() 後面執行，那樣setInterval() 還沒等到執行，就已經被幹掉了。

var intervalNum = 0, clearId = 0;
function testsetInterval(){
    var date = new Date();
    console.log(date.getSeconds());
    console.log("setInterval", intervalNum++);
    clearInterval(clearId);     //也可以在此執行
}
function testFuntion() {
    clearId = setInterval(function () {
        testsetInterval();          //每隔4秒呼叫testsetInterval()
        // clearInterval(clearId);     //可以在此執行
    },4000);
}

　　執行一次，關閉 setInterval()，和 setTimeout() 功能相同

　　最後，將書中看到的“避免雙重求值”搬到這。以解釋為什麼 “ 建議傳入函式而不是字串以作為第一個引數”。　　

　　　setTimeout()、setInterval() 允許傳入一個JS程式碼字串並執行，然而在JS程式碼中執行另一段JS程式碼時，程式碼首先會以正常的方式求值，然後在執行過程中對包含於字串中的程式碼發起另一個求值運算，從而造成雙重求值。它比直接包含的程式碼執行速度慢很多，原因在於， 每次呼叫setTimeout()、setInterval()都會建立一個新的直譯器/編譯器例項。這必然使得程式碼執行速度變慢，效率降低，從而造成效能的浪費。所以建議傳入函式而不是字串來作為第一個引數。　　

　　我做了一個小測試。從 0 自加到 1億，比較兩種方式各自的實際耗時，程式碼以及測試結果如下：

var Timer ={     //從書上copy的一個JS程式碼時間分析物件
    _data : {},
    start:function (key) {
        Timer._data[key] = new Date();
    },
    stop:function (key) {
        var time = Timer._data[key];
        if(time){
            Timer._data[key] = new Date()-time;
        }
    },
    getTime:function (key) {
        // return Timer._data[key];
        console.log("time = "+ Timer._data[key]);
    }
};

var intervalNum = 100000000, clearId = 100000000;
function testsetInterval(){   //計算從0 加到 1億，以 傳入函式方式 執行
    var temp = 0;
    while(intervalNum--){
        if(temp !== 0){
            temp = temp + intervalNum;
        }else {
            temp = (intervalNum+1) + intervalNum;
        }
    }
    console.log(temp);
    Timer.stop("testsetInterval");      //呼叫stop(),計算時間差
    Timer.getTime("testsetInterval");   //將時間差值打印出來
}
function testsetTimeout(){      //計算從0 加到 1億，以 字串方式 執行
    var temp = 0;
    while(clearId--){
        if(temp !== 0){
            temp = temp + clearId;
        }else {
            temp = (clearId+1) + clearId;
        }
    }
    console.log(temp);
    Timer.stop("setTimeout");       //呼叫stop(),計算時間差
    Timer.getTime("setTimeout");    //將時間差值打印出來
}
function testFuntion() {
    Timer.start("testsetInterval");     //獲取程式碼執行前的初始時間
    setTimeout(function () {
        testsetInterval();      //每隔1秒呼叫testsetInterval()
    },1000);

    Timer.start("setTimeout");
    setTimeout("testsetTimeout()",1000);    //雙重求值模式,每隔1秒呼叫testsetTimeout()
}

，隨著資料量的攀升，耗時的差距，更明顯。下面以 0 自加到 10億，再試下

　　看得出，“雙重求值”對效能影響還是蠻大的。雖然現在的CPU主頻都相當高，處理資料相當快，而平時前端處理資料的數量級，也不見得能達到這麼高，但是養成一種好的程式設計習慣和塑造提高程式碼效能的思想總沒得錯！