JavaScript实现发送验证码倒计时功能的递归与定时器方案

作者:半夏时间:2026-10-30 17:23:01浏览:510

本文介绍利用JavaScript递归函数结合setTimeout实现发送验证码倒计时的方法。通过点击事件触发Ajax请求,并在倒计时期间禁用按钮显示剩余秒数,当时间归零时恢复按钮状态。核心逻辑在于递归调用自身以维持计时循环,确保前端交互的流畅性。

JavaScript实现发送验证码倒计时功能的递归与定时器方案

本文分享一种利用JavaScript递归机制实现验证码倒计时效果的具体方案,供开发者参考。

倒计时效果展示

具体运行效果如下:

JavaScript实现发送验证码倒计时功能的递归与定时器方案

事件触发逻辑

触发该效果的事件逻辑为:

验证码发送与倒计时核心代码


//发送验证码
$('.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时,函数继续递归调用自身,并将当前显示的时间数值减1。setTimeout的使用确保了计时的异步执行。直到time递减至1时,移除按钮的disabled属性,并将按钮文本重置为“发送验证码”。

更多关于JavaScript相关内容可查看本站专题:《JavaScript时间与日期操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

作者最新文章