1,定时器执行的函数
var SMSbtnTiming = function () { if (secondCount === 0) { $self.addClass('enabled').removeClass('disabled'); $self.val('重新发送'); $self.removeAttr('disabled'); if (intervalHook) { clearInterval(intervalHook); intervalHook = null; } } else { $self.val('重新发送(' + secondCount + 's)'); secondCount--; } };
2,发送请求,并且操作成功后才执行倒计时
$.ajax({ url: changeBindServer + action, type: 'GET', dataType: 'jsonp', data: {mobile: mobile}, success: function (data) { if (data.result) { $spanHint.removeClass(CodeErrorMsg_class); $spanHint.show(); $spanHint.text('发送成功'); $self.addClass('disabled').removeClass('enabled'); $self.val('重新发送(60s)'); $self[0].disabled = 'disabled';//禁止按钮的点击默认动作 //$ChanjetNewCodeInput[0].disabled = "disabled"; intervalHook = setInterval(SMSbtnTiming, 1000); enAbleNextBtn($inputTF); $inputTF.removeAttr('disabled'); $inputTF.focus(); } else { console.log(data); var date = new Date(); console.log(date); if (data.errorMessage.indexOf('绑定') != -1) { setOldMobileMsg($oldMobileError, data.errorMessage); } else { $spanHint.text(data.errorMessage);//数量超出限制 $spanHint.addClass(CodeErrorMsg_class); $spanHint.show(); } //setTimeout(restoreSpanHit, 4000); } setTimeout(restoreSpanHit, 5000); } });
3,定时器方法中的this指什么?
js代码:
var timing2= function () { console.log(this); console.log('timing'); clearInterval(a); }; a=setInterval(timing2, 2000);
运行结果:
代码改为:
var obj={ time2: function () { var timing2= function () { console.log(this); console.log('timing'); clearInterval(a); }; a=setInterval(timing2, 2000); } }; obj.time2();
结果也一样
解决方法:
抽取出来一个方法:
SMSbtnTimingCommon: function (me) {//定时器的方法 //me._data=me._data||{}; //console.log(me); var $self = $('#getAuthCodeBtn'); if (me._data.bind.secondCount === 0) { var intervalHookTmp = me._data.bind.intervalHook; if (intervalHookTmp) { console.log('me._data.intervalHook:' + intervalHookTmp); clearInterval(intervalHookTmp); console.log('me._data.intervalHook:' + intervalHookTmp); console.log('stop timing'); me._data.bind.intervalHook = null; } $self.html('获取验证码'); sendCodeBtn.enable($self); } else { //console.log(me._data.secondCount); $self.html('重新获取(' + me._data.bind.secondCount + ')'); me._data.bind.secondCount = me._data.bind.secondCount - 1; } }
调用:
var SMSbtnTiming= function () { me.SMSbtnTimingCommon(me); };
相关推荐
在Android应用开发中,短信验证码倒计时按钮是常见的功能之一,主要用于用户验证手机号码的正确性。这个功能通常在用户注册或者找回密码等场景下出现,用户输入手机号后,点击获取验证码,系统会发送一条包含验证码...
3. 倒计时逻辑:当点击按钮后,启动一个定时器(setTimeout或setInterval),更新按钮文本显示剩余时间,并在时间到时解除按钮的禁用状态。 4. 可能会使用`clearTimeout`或`clearInterval`来取消已设置的定时器,以...
在iOS开发中,"ios-发送验证码倒计时按钮.zip" 这个资源包主要涉及的是用户验证过程中常见的功能:发送验证码并实现倒计时功能。这个功能在注册、找回密码等场景中非常常见,目的是确保用户能及时接收到验证码,并在...
本文将深入探讨“封装的发送短信验证倒计时”这一技术主题,以及如何利用jQuery和Cookie实现这个功能。 首先,我们要明白发送短信验证码的基本流程:用户输入手机号码,点击获取验证码,后端系统生成一个随机验证码...
在网页开发中,短信验证码是验证用户身份的重要手段,它通常与倒计时功能结合,以防止用户频繁发送验证码,减轻服务器压力,并提供良好的用户体验。本文将深入探讨如何实现一个js短信验证码倒计时功能,同时确保在...
1. 在用户点击发送短信按钮后,启动倒计时。这可以通过在按钮的点击事件中创建并启动`CountDownTimer`来实现。 2. 在`onTick()`方法中更新UI,显示剩余的倒计时时间。可以将`millisUntilFinished`转换为分钟和秒,...
3.返回发送状态,如果发送成功,实现等待倒计时,锁定按钮处于禁用状态。 同时把倒计时数据写入 cookie 防止页面被刷新 4.倒计时的实现不采用全局变量,避免污染全局,或被其他函数修改。 5.按钮点击时先判断 ...
在Android开发中,自定义View...这个组件不仅可以用于短信验证码的发送,还可以应用到其他需要倒计时功能的场景,如重新加载数据、尝试连接等。在实际项目中,封装这样的自定义View有助于提高代码的可维护性和一致性。
当用户点击发送短信验证码的按钮后,按钮会进入一个不可点击状态,并开始倒计时,直到倒计时结束才能再次发送验证码。 要实现这个功能,我们需要以下几个步骤: 1. **按钮禁用与启用**: 当用户点击发送短信的...
5. **网络请求**:在倒计时结束后,用户点击按钮时,应该检查是否已过倒计时期限,如果未过期则重新发送验证码请求,否则提示用户验证码已过期。 6. **异常处理**:在整个过程中,我们需要考虑各种可能的异常情况,...
本知识点将详细讲解如何利用jQuery实现一个倒计时短信验证功能,这是一种常见的用户验证手段,通常用于提高网站或应用的安全性。 首先,我们需要理解倒计时短信验证的基本流程: 1. 用户输入手机号码。 2. 用户...
首先,我们需要明白这个功能的基本思路:当用户点击发送短信按钮后,按钮会被禁用,并显示一个倒计时,倒计时结束后按钮恢复可用状态。在这个过程中,我们将利用JavaScript的定时器(setTimeout)来实现时间的递减。...
在网页设计中,"网页上发送短信时验证码变灰倒计时显示" 是一个常见的功能,主要用于提升用户体验和防止恶意操作。这个功能通常出现在用户注册、登录或进行其他需要验证身份的操作时,确保手机号码的有效性和唯一性...
一般原理是“当点击发送按钮时,发送ajax请求到服务器发送短信验证码,成功则把发送按钮设置为不可点击,并且调用定时器,按钮显示倒计时”。如果就这样不对倒计时存储做处理,那么当刷新页面,会出现倒计时失效,...
在IT行业中,尤其是在Web开发和手机应用开发领域,获取短信验证码倒计时是一个常见的功能,它主要用于增强用户体验,确保用户在请求短信验证码后不会频繁发送,同时也为服务器提供了一定的保护,避免短时间内大量...
在jQuery中实现表单中的短信验证码倒计时功能是一项常见的前端交互设计,它增强了用户体验,同时也确保了用户在请求验证码后必须等待一段时间才能再次发送,防止滥用系统资源。以下将详细讲解如何使用jQuery来实现这...
在iOS开发中,按钮(UIButton)倒计时功能是一个常见的需求,例如在用户发送短信验证码后,为了防止频繁发送,通常会设置一个等待时间,在这段时间内按钮会被禁用并显示剩余时间,直到倒计时结束才能再次触发按钮...
在React开发中,创建一个验证码倒计时组件是常见的需求,尤其在用户验证身份或发送短信验证码的场景中。这个组件通常包含一个按钮,点击后启动倒计时,期间按钮变为不可点击,倒计时结束后按钮恢复原状,允许用户...