前言：在引用開發(fā)中铛纬，我們經(jīng)常需要在頁面中執(zhí)行一些周期性的操作厌均，比如每隔一段時間就執(zhí)行某一固定的操作。而對于這樣的操作告唆，最簡單和最高效的實現(xiàn)的方式就是使用setInterval和setTimeout兩種方式了棺弊。接下來我們就來詳細了解一下這兩種不同的定時器吧！
setInterval
俗稱：間歇性定時器擒悬；功能創(chuàng)建一個定時器模她，可按照指定的周期（以毫秒計）來調(diào)用函數(shù)或計算表達式；setInterval() 方法會不停地調(diào)用函數(shù)懂牧，直到 clearInterval() 被調(diào)用或窗口被關閉侈净。
由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數(shù)；注意這種定時器只要創(chuàng)建了就等于啟動僧凤。
語法： setInterval(函數(shù)名畜侦，時間)
功能： 每隔參數(shù)2的時間內(nèi)，就調(diào)用一次參數(shù)1的函數(shù)躯保。注意：時間以毫秒來計算的旋膳！
如果要關閉setInterval設置的定時器，首先就要獲取setInterval返回的ID值途事，然后通過clearInterval（返回的ID值）來關閉特定的setInterval設置的定時器验懊。
實例：
var timer = window.setInterval(func,5000);
function func(){
console.log("Hello World");
}
這里就創(chuàng)建了一個每隔5000毫秒就執(zhí)行函數(shù)名為func的定時器，在函數(shù)中執(zhí)行打印“Hello World”尸变。當然义图，上面也可以換成為這樣來寫：
var timer = window.clearInterval(function(){
console.log("Hello World");
},5000);
兩者的功能是一毛一樣的,只不過后面的是匿名函數(shù)而已！
如果要清除上面的定時器該腫么辦呢召烂？我們可以這樣來做歌溉。
clearInterval(timer);
這里就通過創(chuàng)建定時器時存儲在timer中的ID值，進行銷毀特定ID的定時器骑晶。
關于返回的ID值，我們該怎么看呢草慧？這就相當于在創(chuàng)建一個定時器的同時桶蛔，我們也賦予了這個定時器一個特定的身份了，就像我們偉大的祖國給予每個人特定的身份證一樣漫谷，是獨一無二的仔雷，也代表了我們每個人也是獨一無二的，在這個世界就只有一個你這樣。你的名字５拧５绺А！
下面我們利用下面的代碼一起來看看定時器的身份證到底是什么鬼竖共！咳咳
<div id="div1" style="position: absolute;left: 20px;top: 20px;width: 50px;height: 50px;background-color: red"></div>
<script type="text/javascript">
var timer;
var div1 = document.getElementById("div1");
div1.onclick = function(){
timer = setInterval(function(){
console.log(timer);
},1000);
}
</script>
這里通過JS獲取到id為“div1”的div蝙叛，給其增加點擊事件后，只要點擊div后公给，就會打印當前定時器的id借帘。下面就是div的樣式和不斷的點擊之后打印的結(jié)果。
打印結(jié)果可以看出淌铐，當我們不斷的點擊div后肺然，timer的值也在不斷的改變，說明了定時器在不斷的制造出來腿准，以至于在一定時間內(nèi)打印的次數(shù)在不斷的增加际起，timer的值也被不斷新建的定時器賦值。也說明了timer就是定時器的返回值吐葱。
當然街望，我們在實際中遇到的問題遠不止如此簡單，這就需要我們開動我們靈活的大腦了唇撬，誓要將定時器玩弄于手掌之中它匕！成大事者，人也窖认。
setTimeout
相比于上面的間歇式定時器豫柬，此種定時器俗稱延時定時器，也就是用于在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達式扑浸。就相當于設置了一個定時炸彈烧给，在你設定的特定時間之后，它就會被激活喝噪，自行爆炸础嫡，爆炸之后它也不會再次爆炸！setTimeout定時器也是這樣酝惧，其只執(zhí)行一次榴鼎。如果要多次調(diào)用沈贝，請使用 setInterval() 或者自身再次調(diào)用 setTimeout()色洞。
** 語法：**setTimeout(函數(shù)名，時間);
功能：參數(shù)2時間后調(diào)用參數(shù)1函數(shù)
返回值：也是返回定時器的id酱塔，可以通過該id關閉定時器
如果要關閉setTimeout設置的定時器哩陕，方法原理同setInterval類似平项，不同的也就是方法名的不同赫舒。用的是clearTimeout(參數(shù))，后面的參數(shù)也就是setTimeout要返回的id值闽瓢。
實例：
<button onclick="closeTimeout()">關閉延時定時器</button>
<script type="text/javascript">
var timer = window.setTimeout(func,5000);
function func(){
console.log("Hello World");
}
function closeTimeout(){
window.clearTimeout(timer); // 關閉延時定時器
}
</script>
這里設置了5秒后就會只打印一次的延時定時器接癌，然后給按鈕增加了清除定時器的方法，一旦按下button扣讼，延時定時器就會被銷毀了缺猛；不過，需要注意的是如果你在延時定時器銷毀之后點擊是沒有任何效果的届谈，因為延時定時器執(zhí)行了一次之后它就自動銷毀了枯夜！(對著setInterval說：看看人家多自覺！ setInterval弱弱地說：可是它功能沒我強大凹枭健湖雹！我默默不說話。曙搬。摔吏。)
其實，在現(xiàn)階段的開發(fā)階段纵装，setInterval用的還是比setTimeout頻繁的征讲。因為每隔一段時間就執(zhí)行相同的動作，也就是重復相同的動作橡娄，在我們的現(xiàn)實生活中還是常常遇見的诗箍。
最后簡單談談定時器的回調(diào)：
其1：定時器的回調(diào)函數(shù)并不是相當于在時間到了就執(zhí)行，而是有一個主js執(zhí)行進程挽唉，這個進程是頁面剛加載的時候頁面按照加載順序執(zhí)行的js代碼滤祖，此外還有一個需要在進程空閑的時候執(zhí)行的代碼隊列，而我們所說的定時器的回調(diào)就是相當于setInterval在特定時間之后把定時器回調(diào)放入到空閑隊列中（注意瓶籽，空閑隊列有可能還有其它的代碼匠童，比如點擊事件，因此定時器回調(diào)放入的位置不一定是空閑隊列的開始位置Ｋ芩场）
其2：setInterval有個很煩的地方就是當js主程序空閑時候汤求，執(zhí)行代碼隊列里面的代碼的時候，如果此時候我們有一個問題严拒，定時器是等到回調(diào)執(zhí)行完扬绪，才開始計時進行下次循環(huán)呢？還是只要一次計時完畢裤唠，插入回調(diào)之后不管回調(diào)執(zhí)不執(zhí)行就開始計時呢挤牛？答案顯然是后者，這也就是我說setInterval坑比的原因啊巧骚，因為這會出現(xiàn)一種情況赊颠，當我們插入回調(diào)的時候前隊列有別的代碼在執(zhí)行，這時候回調(diào)肯定是不會執(zhí)行的劈彪，因此如果這個時候限定時間到了會再次插入回調(diào)竣蹦，這個時候如果發(fā)現(xiàn)隊列中的第一次回調(diào)沒有執(zhí)行，那么再次插入的回調(diào)瀏覽器就默認取消（這是以防出現(xiàn)回調(diào)連續(xù)執(zhí)行多次的情況）但是這又引發(fā)了新的情況就是有些回調(diào)是不能取消掉的沧奴？
課后練習：
例一：
setTimeout(function(){
console.log("小馬“);
setTimeout(function(){arguments.callee;},1000);
},1000)
例二：
setInterval(function(){console.log("小馬“);},1000);
問一與二的區(qū)別痘括？
var i=0;
function a(){
t=setTimeout(function(){console.log("小明")},0);
}
a();
alert(”小紅“);
問先顯示小明呢？還是小紅滔吠？纲菌？還是小強呢？疮绷？翰舌？
總結(jié)：setInterval和setTimeout是兩種功能完全不一樣的定時器，只要運用得當冬骚，就可以讓它完成某些一次性操作或每隔一段時間就執(zhí)行的操作吧椅贱！
