一、延時器(setTimeout)
1.延時器(setTimeout)的工作方式是：當設定一個延時器是5s后進行時，並不代表它5s后就立即執行，只是代表它5s后會被加入隊列，如果5s后，隊列沒有其他東西，那么延時器的代碼會立即執行，否則會延遲執行。
因此，關於延時器最重要的一點是：指定的時間間隔（如設置5s后執行），表示何時將延時器加入到隊列，而不是何時真正執行代碼。
二、定時器(setInterval)
1.定時器的一大特點是每隔一段時間(如每隔2s）就會執行，一直重復。這樣有個問題：設定一個定時器a每隔2s執行一次，如果a執行的時間（executiveTime）大於時間間隔(2s)，那么，第一次執行的a還沒執行完第一次，就開始執行第二次了。
js巧妙地避免了這個問題——即等到定時器的代碼執行完后，再去將定時器的代碼加入到隊列中，所以定時器代碼加入隊列的最小時間間隔即指定間隔（因為理想狀態是是定時器的執行時間在時間間隔內完成）。
2.使用setInterval的問題
（1）某些間隔會被跳過——如設置每個1s執行一次，如果該定時器代碼執行時間大於1s，或者正好等於1s，那么，相當於代碼執行時間正好等於間隔時間，那么，這個間隔時間就被執行時間占據了，所以就沒有了間隔時間即沒有間隔。
利用定時器制作一個倒計時功能，有開始、暫停、繼續、復位功能。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style> #content{display: block;width: 200px;height: 200px;border: 1px solid black;margin: 20px auto;text-align: center;line-height: 200px;font-size: 50px;} #btn{width: 200px;height: 40px;border: 1px solid black;border-radius: 10px;margin: 20px auto;display: block;cursor: pointer;background: blue;color: #FFFFFF;font-size: 25px;} </style>
</head>
<body>
<span id="content">
100
</span>
<input type="button" id="btn" value="開始">//定義一個功能按鈕
<script>
var ocontent = document.getElementById("content"); var obtn = document.getElementById("btn"); var start = ocontent.innerHTML; var num = ocontent.innerHTML; var timer = null; //設置全局變量 var onoff = 1; //開關 obtn.onclick = function(){ if(onoff == 1){ //當開關等於1時，執行開始倒計時功能 clearInterval(timer); //清除計時器，避免重復點擊開關時，造成bug timer=setInterval(function(){ if(num == 1){ num = "結束了" obtn.value="復位" clearInterval(timer); onoff = 2; }else{ num--; } ocontent.innerHTML = num; },100) onoff =0; //“定義”到暫停的功能 obtn.value = "暫停" //點擊按鈕時，obtn.value變為暫停 }else if(onoff == 0){ //暫停功能 clearInterval(timer); onoff = 1; //暫停之后繼續倒計時 obtn.value = "繼續" //obtn.value變為繼續 }else if(onoff == 2){ //啟動復位功能 obtn.value = "開始"; onoff = 1; num = start; ocontent.innerHTML = start; } } </script>
</body>
</html>
效果如下：
