倒计时效果的递归实现

效果:
倒计时效果的递归实现

事件:

    //发送验证码
    $('.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并更改内容为‘发送验证码’。

本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/p/5179822.html,如需转载请自行联系原作者
上一篇:Net设计模式实例之模板方法模式(Template Mothed Pattern)(1)


下一篇:阿里云一键部署 Hadoop 分布式集群