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