JavaScript定時器

一、setTimeout

setTimeout(function(){
    //要執行的代碼                     
},200);

理解：指隔200ms后,定時器代碼被添加到隊列中,等待JavaScript進程空閑后,代碼才執行

二、setInterval

setInterval(function(){
    //要執行的代碼                     
},200);

A、理解：
1、上面代碼是指每隔200ms就創建一個執行代碼的定時器

2、當使用setInterval時,僅當(在隊列中)沒有該定時器的任何其他代碼實例時,才將定時器代碼添加到隊列中,引用JavaScript高級程序設計第二版書中語句
(即：當前一個定時器代碼執行時,緊跟后面的第一個定時器代碼將添加到隊列中,等待執行,再后面的定時器代碼不會添加到隊列中)

B、問題：
當定時器代碼執行時間(假如需要600ms才執行完)超過指定間隔(這里是200ms),那么某些定時器代碼就會被跳過(即后面的定時器代碼不會被添加到隊列中),
前一個定時器代碼執行完畢后,隊列中的定時器代碼立刻執行,各定時器之間的代碼執行沒有間隔

C、解決方法：
使用鏈式setTimeout,如：

setTimeout(function(){
    //要執行的代碼
    setTimeout(arguments.callee,200);
},200);

這樣做的好處是:前一個定時器要執行的代碼執行完且等待200ms后,才創建一個新的定時器,並把定時器代碼添加到隊列中執行
即：不會出現定時器代碼被跳過的情況;定時器之間的代碼執行可以有間隔(根據自己設置)

D、實際應用：
1、javascript腳本會阻塞瀏覽器處理其他事件,如與用戶的交互,如果一段js腳本運行的時間過長,那么我們可以使用js定時器,騰出空閑,避免用戶等過長時間
2、理解函數節流

函數節流：指某些代碼不可以在沒有間斷的情況下連續執行
看下面代碼：

window.onresize = function(){
	console.log(document.documentElement.clientHeight);
}
//在resize事件處理程序結束之前,一直輸出着瀏覽器視口高度

當你在調整瀏覽器窗口大小時,resize事件處理程序中代碼就一直在運行着

改進代碼：

var timeoutId = null;
window.onresize = function(){
	clearTimeout(timeoutId);
	timeoutId = setTimeout(function(){
		console.log(document.documentElement.clientHeight);									
	},100);
}

封裝以后的改進代碼：

function cHeight(){
	console.log(document.documentElement.clientHeight);
}
function throttle(method,context){
	clearTimeout(method.tId);
	method.tId = setTimeout(function(){
		method.call(context);								 
	},100);
}
window.onresize = function(){
	throttle(cHeight);	
}

//在resize事件處理程序結束后,等待100ms后代碼添加到隊列中執行,

 只輸出最后一個定時器代碼結果,瀏覽器不會在極短的時間內進行過多的計算