jQuery实现验证码60秒倒计时##
在lib.dom.d.ts中有setInterval和setTimeout两种定时器的声明:
declare function setInterval(handler: (...args: any[]) => void, timeout: number): number;
declare function setInterval(handler: any, timeout?: any, ...args: any[]): number;
declare function setTimeout(handler: (...args: any[]) => void, timeout: number): number;
declare function setTimeout(handler: any, timeout?: any, ...args: any[]): number;
两者定时器的区别在于:
setInterval以指定时间为周期循环执行
setTimeout只在指定时间后执行一次
实现短信或者邮箱发送验证码60秒倒计时功能的时候,大多数使用的是以下这种比较好理解的方法,用的是setTimeout:
function invokeSettime(obj){
var countdown=60;
settime(obj);
function settime(obj) {
if (countdown == 0) {
$(obj).attr("disabled",false);
$(obj).text("获取验证码");
countdown = 60;
return;
} else {
$(obj).attr("disabled",true);
$(obj).text("(" + countdown + ") s 重新发送");
countdown--;
}
setTimeout(function() {
settime(obj) }
,1000)
}
}
但是我感觉使用setInterval的写法能更简洁一些,也推荐大家采用:
function resendCpatcha (btnEle, countdown){
btnEle.text('发送验证码' + '(' + countdown + ')');
var t = setInterval(function() {
if (--countdown === 0){
clearInterval(t);
btnEle.attr('disabled',false);
btnEle.text('重新发送验证码');
} else{
btnEle.attr('disabled',true);
btnEle.text('发送验证码' + '(' + countdown + ')');
}
}, 1000);
}