setInterval和setTimeout區(qū)別(驗(yàn)證碼倒計(jì)時(shí))

劉福發(fā)布于2019-08-20 12:15 / 1027人閱讀

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

寫了一個(gè)驗(yàn)證碼60s倒計(jì)時(shí)的小demo來幫助記憶和區(qū)別setInterval和setTimeout。

html

//setInterval重復(fù)循環(huán)計(jì)時(shí)，需要清除計(jì)時(shí)器 (clearInterval)
function getTime1(){
    var time1=60;
    var val="";

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

// setTimeout倒計(jì)時(shí),只重復(fù)一次，計(jì)時(shí)需要反復(fù)調(diào)用

var time2=60;
function getTime2() { 
    if (time2 <= 0) { 
        $("input#btn2").val("獲取驗(yàn)證碼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會(huì)自動(dòng)重復(fù)，setTimeout不會(huì)重復(fù)。setInterval每隔指定的時(shí)間就執(zhí)行對(duì)應(yīng)的函數(shù)或代碼，所以會(huì)使用到clearInterval來清除取消setInterval()設(shè)定的定時(shí)操作

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

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