写了一个验证码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)
    } 

} 

2.而setTimeout只执行一次，所以，在进行计时操作的时候，需要重复调用函数。

3.setTimeout可多用于延迟操作，SetInterval多用于重复进行某操作。

原文地址：https://www.cnblogs.com/baimeishaoxia/p/12587392.html