settimeout、setinterval區別和相互模擬

前幾天翻書，看到「避免雙重求值」一節時有提到settimeout()、setinterval() 建議傳入函數而不是字符串以做爲第一個參數，因此這裏總結一下settimeout()和setinterval()的區別，以及它們之間的相互模擬。

　　setTimeout()： 方法用於在指定的毫秒數後調用函數或計算表達式(函數更好，下面會解釋爲何函數更好！)。

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

　　setInterval() ：方法用於按照指定的週期（以毫秒計）來循環調用函數或計算表達式，直到 clearInterval() 被調用或窗口關閉，由 setInterval() 返回的 ID 值可用做 clearInterval() 方法的參數。

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

 

　　從上面的定義能夠看出，setTimeout(表達式,延時時間)在執行時,是在載入後延遲指定時間後,去執行一次表達式,次數是一次；而 setInterval(表達式,時間間隔)則不同,它從載入後,每隔指定的時間就執行一次表達式，只要窗口不關閉或 clearInterval() 調用就會無限循環下去。因此,二者是徹底是不同的，具體看下面測試代碼和結果！

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主頻都至關高，處理數據至關快，而平時前端處理數據的數量級，也不見得能達到這麼高，可是養成一種好的編程習慣和塑造提升代碼性能的思想總沒得錯！