三种方法使用jquery获取验证码倒计时

三种方法使用jquery获取验证码倒计时，并设置防重复点击
<div class="root">




<button class="btn">获取验证码1</button>




<button class="btn1">获取验证码2</button>


<button class="btn3">获取验证码3</button>
</div>
<script type="text/javascript">
// 一 利用绑定和解绑点击事件
let time1 = 10;
var count = time1;
var countinterval;
var button = $('.btn');
button.click(showTitle);
function showTitle(){
console.log(00000);
countinterval = setInterval(timecount, 1000);
button.off('click',showTitle);//解绑点击事件
}
function timecount(){
button.text(count+'s');
if (count<=0) {
count = time1;
clearInterval(countinterval);
button.text('重新获取验证码');
button.on('click',showTitle);
}
else
count--;
}
//二 设置disabled属性
let time2 = 15;//15s
var count1 = time2;
var countinterval2;
var button2 = $('.btn1');
button2.click(showtitle2);
function showtitle2(){
console.log(11111);
// button2.off();
countintervalt = setInterval(timecount1,1000);
button2.attr('disabled',true);
}
function timecount1(){
button2.text(count1+'s');
if (count1<=0) {
count1 = time2;
clearInterval(countintervalt);
button2.text('重新获取验证码');
button2.attr('disabled',false);
}
else
count1--;
}
//三 加标识
let time3 = 20;//15s
var canclick=true;
var count2 = time3;
var countinterval3;
var button3 = $('.btn3');
button3.click(showtitle3);
function showtitle3(){
if (canclick) {
console.log(11111);
countinterval3 = setInterval(timecount2,1000);
canclick = false;
}
}
function timecount2(){
button3.text(count2+'s');
if (count2<=0) {
count2 = time3;
clearInterval(countinterval3);
button3.text('重新获取验证码');
canclick = true;
}
else
count2--;
</script>