寫了一個驗證碼60s倒數計時的小demo來幫助記憶和區別setInterval和setTimeout。

html

<input type="button" id="btn1" value="setInterval獲取驗證碼btn1" onclick="getTime1()" />
<input type="button" id="btn2" value="setTimeout獲取驗證碼btn2" onclick="getTime2()" />  

js

//setInterval重複迴圈計時，需要清除計時器 (clearInterval)
function getTime1(){
    var time1=60;
    var val=``;

    codeTimes=setInterval(function() { 
        if(time1<=0){
            clearInterval(codeTimes);
            $(`input#btn1`).val("獲取驗證碼btn1");
            $(`input#btn1`).attr("disabled",false);
        }else{
            time1--;
            val=time1+`後重獲`;
            $(`input#btn1`).val(val);
            $(`input#btn1`).attr("disabled",true);
        }
        
    },1000);
}

// setTimeout倒數計時,只重複一次，計時需要反覆呼叫

var time2=60;
function getTime2() { 
    if (time2 <= 0) { 
        $(`input#btn2`).val("獲取驗證碼btn2");
        $(`input#btn2`).attr("disabled",false);
        time2 = 60; 
    } else { 
        time2--;
        val=time2+`後重獲`;
        $(`input#btn2`).val(val);
        $(`input#btn2`).attr("disabled",true);
        setTimeout(function() { 
            gettime() 
        },1000)
    } 
    
} 

---

1.如上程式碼所示，setInterval會自動重複，setTimeout不會重複。setInterval每隔指定的時間就執行對應的函式或程式碼，所以會使用到clearInterval來清除取消setInterval()設定的定時操作

2.而setTimeout只執行一次，所以，在進行計時操作的時候，需要重複呼叫函式。

3.setTimeout可多用於延遲操作，SetInterval多用於重複進行某操作。