什麼叫定時器？我們可以看到 學習網首頁有一個“圖片輪播”特效，每隔2s圖片變換一次，這裡就用到了定時器。啊，定時器，太重要了！天塌下來，大家都要扛著把它學會先。
定時器用途非常廣，在圖片輪播、在線時鐘、彈窗廣告等地方大顯身手。凡是自動執行的東西，很大可能都是跟定時器有關。
在JavaScript中，關於定時器的實現，我們有2組方法：
這一節的例子使用“在線測試”不會有效果，請大家自行把代碼復制到本地編輯器進行測試預覽。下面我們詳細分析這2組方法的用法與不同。
在JavaScript中，我們可以使用setTimeout()方法來設置“一次性”調用的函數。其中clearTimeout()可以用來取消執行setTimeout()方法。
語法：
var 變量名 = setTimeout(code , time);
說明：
參數code可以是一段代碼，也可以是一個調用的函數名；
參數time表示時間，表示要過多長時間才執行code中的內容，單位為毫秒。
舉例：參數code是一段代碼
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
window.onload = function () {
setTimeout("alert('歡迎來到 學習網');", 2000);
}
</script>
</head>
<body>
<p>2秒後提示歡迎語。</p>
</body>
</html>
在浏覽器預覽效果如下：
分析：
打開頁面2秒後，浏覽器會彈出歡迎語。由於setTimeout()方法只會執行一次，所以只會彈出一次對話框。彈出對話框如下圖：
舉例2：參數code是一個函數名
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
window.onload = function () {
setTimeout("welcome()", 2000);
}
function welcome() {
alert("歡迎來到 學習網");
}
</script>
</head>
<body>
<p>2秒後提示歡迎語。</p>
</body>
</html>
在浏覽器預覽效果如下：
分析：
舉例1和舉例2實際效果是相同的，只不過參數code不一樣罷了。
在JavaScript中，我們可以使用setInterval()方法來設置“重復性”調用的函數。其中clearInterval()可以用來取消執行setTimeout()方法。
語法：
var 變量名 = setInterval (code , time);
說明：
參數code可以是一段代碼，也可以是一個調用的函數名；
參數time表示時間，表示要過多長時間才執行code中的內容，單位為毫秒。
setTimeout()方法與setInterval()方法的語法很相似，實際上這兩者在用法方面區別非常大。其中setTimeout()方法內的代碼只會執行一次，而setInterval()方法內的代碼會重復性執行，除非你使用clearInterval()方法來取消執行。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
//定義全局變量，用於記錄秒數
var n = 5;
window.onload = function () {
//設置定時器，重復執行函數countDown()
var t = setInterval("countDown()", 1000);
}
//定義函數
function countDown() {
//判斷n是否大於0，因為倒計時不可能有負數
if (n > 0){
n--;
document.getElementById("num").innerHTML = n;
}
}
</script>
</head>
<body>
<p>新年倒計時：<span id="num">5</span></p>
</body>
</html>
在浏覽器預覽效果如下：
分析：
window.onload表示在頁面加載完畢執行，在“JavaScript頁面相關事件”我們會詳細講解到。
setInterval()方法會重復執行某一段代碼或函數。如果這個例子使用setTimeout方法就不能實現了，因為setTimeout()方法只會執行一次，而setInterval()會重復執行。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
//定義全局變量，用於記錄秒數
var n = 0;
window.onload = function () {
//設置定時器，重復執行函數add()
var t = setInterval("add()", 1000);
//點擊“暫停”按鈕事件
document.getElementById("btn_pause").onclick = function () {
clearInterval(t);
}
//點擊“繼續”按鈕事件
document.getElementById("btn_continue").onclick = function () {
if (confirm("你還要繼續裝逼？")){
t = setInterval("add()", 1000);
}
}
}
//定義計時函數
function add() {
n++;
document.getElementById("num").innerHTML = n;
}
</script>
</head>
<body>
<p>你已經裝了<span id="num">0</span>秒的“逼”，趕緊暫停吧！</p>
<input id="btn_pause" value="暫停" type="button"/>
<input id="btn_continue" value="繼續" type="button" />
</body>
</html>
在浏覽器預覽效果如下：
分析：
這裡我做了一個小程序，其中使用setInterval()方法重復執行計時函數，並且利用按鈕點擊事件配合clearInterval()方法來進行“暫停”。
對於初學者來說，這個程序可能有點復雜，涉及了JavaScript對話框、DOM操作和JavaScript事件。請大家學習了後續課程再來看看。
這一節，我們把定時器的語法簡單給大家做個介紹，在後面課程或者以後開發中，你們會經常見到定時器的身影。
總結1、在JavaScript中，關於定時器的實現，我們有2組方法：
2、setTimeout()方法內的代碼只會執行一次，而setInterval()方法內的代碼會重復性執行。