倒計時效果的遞歸實現


效果:

事件:

    //發送驗證碼
    $('.js-sms-code').click(function(){
        $(this).attr("disabled", "disabled").html("<span style='color:#666'><span id='countdown'>60</span>s 后再試</span>");
        countdown();
        var tel = $('#tel').val();
        $.ajax({
            url: "{sh::U('Home/sendSmscode')}",
            type:'POST',
            dataType:"json",
            data: {tel: tel},
            success: function() {
            },
            error: function() {
                $('.js-help-info').html("請求失敗");
            }
        });
    })

點評:這里的countdown方法就是妙處。

看代碼:

function countdown() { // 遞歸
    setTimeout(function() {
        var time = $("#countdown").text();
        
        if (time == 1) {
            $('.js-sms-code').removeAttr("disabled");
            $('.js-sms-code').html("發送驗證碼");
        } else {
            $("#countdown").text(time - 1);
            countdown();
        }
    }, 1000);
}

點評:如果time不等於1,就繼續調用,同時時間減去一秒。setTimeout也很精髓。直至time減到1為止,移除disabled並更改內容為‘發送驗證碼’。


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com