setInterval和setTimeout區(qū)別(驗證碼倒計時)

DangoSky 發(fā)布于2019-08-01 15:56 / 3185人閱讀

摘要：寫了一個驗證碼倒計時的小來幫助記憶和區(qū)別和。獲取驗證碼獲取驗證碼重復(fù)循環(huán)計時，需要清除計時器獲取驗證碼后重獲倒計時只重復(fù)一次，計時需要反復(fù)調(diào)用獲取驗證碼后重獲如上代碼所示，會自動重復(fù)，不會重復(fù)。可多用于延遲操作，多用于重復(fù)進(jìn)行某操作。

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

html

//setInterval重復(fù)循環(huán)計時，需要清除計時器 (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倒計時,只重復(fù)一次，計時需要反復(fù)調(diào)用

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會自動重復(fù)，setTimeout不會重復(fù)。setInterval每隔指定的時間就執(zhí)行對應(yīng)的函數(shù)或代碼，所以會使用到clearInterval來清除取消setInterval()設(shè)定的定時操作

2.而setTimeout只執(zhí)行一次，所以，在進(jìn)行計時操作的時候，需要重復(fù)調(diào)用函數(shù)。

3.setTimeout可多用于延遲操作，SetInterval多用于重復(fù)進(jìn)行某操作。