发送短信按钮倒计时

2022-04-11 06:15:12

1,定时器执行的函数

Js代码  发送短信按钮倒计时
  1. var SMSbtnTiming = function () {  
  2.                     if (secondCount === 0) {  
  3.                         $self.addClass('enabled').removeClass('disabled');  
  4.                         $self.val('重新发送');  
  5.                         $self.removeAttr('disabled');  
  6.                         if (intervalHook) {  
  7.                             clearInterval(intervalHook);  
  8.                             intervalHook = null;  
  9.                         }  
  10.   
  11.                     } else {  
  12.                         $self.val('重新发送(' + secondCount + 's)');  
  13.                         secondCount--;  
  14.                     }  
  15.   
  16.                 };  

 

2,发送请求,并且操作成功后才执行倒计时

Js代码  发送短信按钮倒计时
  1. $.ajax({  
  2.                     url: changeBindServer + action,  
  3.                     type: 'GET',  
  4.                     dataType: 'jsonp',  
  5.                     data: {mobile: mobile},  
  6.                     success: function (data) {  
  7.                         if (data.result) {  
  8.                             $spanHint.removeClass(CodeErrorMsg_class);  
  9.                             $spanHint.show();  
  10.                             $spanHint.text('发送成功');  
  11.                             $self.addClass('disabled').removeClass('enabled');  
  12.                             $self.val('重新发送(60s)');  
  13.                             $self[0].disabled = 'disabled';//禁止按钮的点击默认动作  
  14.                             //$ChanjetNewCodeInput[0].disabled = "disabled";  
  15.                             intervalHook = setInterval(SMSbtnTiming, 1000);  
  16.                             enAbleNextBtn($inputTF);  
  17.                             $inputTF.removeAttr('disabled');  
  18.                             $inputTF.focus();  
  19.                         } else {  
  20.                             console.log(data);  
  21.                             var date = new Date();  
  22.                             console.log(date);  
  23.                             if (data.errorMessage.indexOf('绑定') != -1) {  
  24.                                 setOldMobileMsg($oldMobileError, data.errorMessage);  
  25.                             } else {  
  26.                                 $spanHint.text(data.errorMessage);//数量超出限制  
  27.                                 $spanHint.addClass(CodeErrorMsg_class);  
  28.                                 $spanHint.show();  
  29.                             }  
  30.   
  31.                             //setTimeout(restoreSpanHit, 4000);  
  32.                         }  
  33.                         setTimeout(restoreSpanHit, 5000);  
  34.                     }  
  35.                 });  

 

3,定时器方法中的this指什么?

js代码:

Js代码  发送短信按钮倒计时
  1. var timing2= function () {  
  2.             console.log(this);  
  3.             console.log('timing');  
  4.             clearInterval(a);  
  5.         };  
  6.         a=setInterval(timing2, 2000);  

 运行结果:
发送短信按钮倒计时
 

代码改为:

Js代码  发送短信按钮倒计时
  1. var obj={  
  2.             time2: function () {  
  3.                 var timing2= function () {  
  4.                     console.log(this);  
  5.                     console.log('timing');  
  6.                     clearInterval(a);  
  7.                 };  
  8.                 a=setInterval(timing2, 2000);  
  9.             }  
  10.         };  
  11.         obj.time2();  

 

结果也一样

 

解决方法:

抽取出来一个方法:

Js代码  发送短信按钮倒计时
  1. SMSbtnTimingCommon: function (me) {//定时器的方法  
  2.         //me._data=me._data||{};  
  3.         //console.log(me);  
  4.         var $self = $('#getAuthCodeBtn');  
  5.         if (me._data.bind.secondCount === 0) {  
  6.             var intervalHookTmp = me._data.bind.intervalHook;  
  7.             if (intervalHookTmp) {  
  8.                 console.log('me._data.intervalHook:' + intervalHookTmp);  
  9.                 clearInterval(intervalHookTmp);  
  10.                 console.log('me._data.intervalHook:' + intervalHookTmp);  
  11.                 console.log('stop timing');  
  12.                 me._data.bind.intervalHook = null;  
  13.             }  
  14.             $self.html('获取验证码');  
  15.             sendCodeBtn.enable($self);  
  16.         } else {  
  17.             //console.log(me._data.secondCount);  
  18.             $self.html('重新获取(' + me._data.bind.secondCount + ')');  
  19.             me._data.bind.secondCount = me._data.bind.secondCount - 1;  
  20.         }  
  21.   
  22.     }  

 调用:

Js代码  发送短信按钮倒计时
  1. var SMSbtnTiming= function () {  
  2.             me.SMSbtnTimingCommon(me);  
  3.         };  

 

上一篇：Hangfire .NET任务调度框架实例


下一篇：Python实现协程的四种方式