`

发送短信按钮倒计时

阅读更多

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);
        };

 

 

 

  • 大小: 9.4 KB
0
1
分享到:
评论

相关推荐

    Android获取短信验证码倒计时按钮

    在Android应用开发中,短信验证码倒计时按钮是常见的功能之一,主要用于用户验证手机号码的正确性。这个功能通常在用户注册或者找回密码等场景下出现,用户输入手机号后,点击获取验证码,系统会发送一条包含验证码...

    JS点击按钮自动倒计时代码.zip

    3. 倒计时逻辑:当点击按钮后,启动一个定时器(setTimeout或setInterval),更新按钮文本显示剩余时间,并在时间到时解除按钮的禁用状态。 4. 可能会使用`clearTimeout`或`clearInterval`来取消已设置的定时器,以...

    ios-发送验证码倒计时按钮.zip

    在iOS开发中,"ios-发送验证码倒计时按钮.zip" 这个资源包主要涉及的是用户验证过程中常见的功能:发送验证码并实现倒计时功能。这个功能在注册、找回密码等场景中非常常见,目的是确保用户能及时接收到验证码,并在...

    封装的发送短信验证倒计时

    本文将深入探讨“封装的发送短信验证倒计时”这一技术主题,以及如何利用jQuery和Cookie实现这个功能。 首先,我们要明白发送短信验证码的基本流程:用户输入手机号码,点击获取验证码,后端系统生成一个随机验证码...

    js短信验证码倒计时(页面刷新无效)

    在网页开发中,短信验证码是验证用户身份的重要手段,它通常与倒计时功能结合,以防止用户频繁发送验证码,减轻服务器压力,并提供良好的用户体验。本文将深入探讨如何实现一个js短信验证码倒计时功能,同时确保在...

    Android短信倒计时Demo

    1. 在用户点击发送短信按钮后,启动倒计时。这可以通过在按钮的点击事件中创建并启动`CountDownTimer`来实现。 2. 在`onTick()`方法中更新UI,显示剩余的倒计时时间。可以将`millisUntilFinished`转换为分钟和秒,...

    原创jquery实现点击按钮后倒计时效果,防页面刷新!

    3.返回发送状态,如果发送成功,实现等待倒计时,锁定按钮处于禁用状态。 同时把倒计时数据写入 cookie 防止页面被刷新 4.倒计时的实现不采用全局变量,避免污染全局,或被其他函数修改。 5.按钮点击时先判断 ...

    自定义Button实现倒计时验证码发送

    在Android开发中,自定义View...这个组件不仅可以用于短信验证码的发送,还可以应用到其他需要倒计时功能的场景,如重新加载数据、尝试连接等。在实际项目中,封装这样的自定义View有助于提高代码的可维护性和一致性。

    JQUERY短信倒计时 问题:限制次数、

    当用户点击发送短信验证码的按钮后,按钮会进入一个不可点击状态,并开始倒计时,直到倒计时结束才能再次发送验证码。 要实现这个功能,我们需要以下几个步骤: 1. **按钮禁用与启用**: 当用户点击发送短信的...

    短信验证button的倒计时

    5. **网络请求**:在倒计时结束后,用户点击按钮时,应该检查是否已过倒计时期限,如果未过期则重新发送验证码请求,否则提示用户验证码已过期。 6. **异常处理**:在整个过程中,我们需要考虑各种可能的异常情况,...

    jquery倒计时短信验证

    本知识点将详细讲解如何利用jQuery实现一个倒计时短信验证功能,这是一种常见的用户验证手段,通常用于提高网站或应用的安全性。 首先,我们需要理解倒计时短信验证的基本流程: 1. 用户输入手机号码。 2. 用户...

    基于JavaScript实现手机短信按钮倒计时(超简单)

    首先,我们需要明白这个功能的基本思路:当用户点击发送短信按钮后,按钮会被禁用,并显示一个倒计时,倒计时结束后按钮恢复可用状态。在这个过程中,我们将利用JavaScript的定时器(setTimeout)来实现时间的递减。...

    网页上发送短信时验证码变灰倒计时显示

    在网页设计中,"网页上发送短信时验证码变灰倒计时显示" 是一个常见的功能,主要用于提升用户体验和防止恶意操作。这个功能通常出现在用户注册、登录或进行其他需要验证身份的操作时,确保手机号码的有效性和唯一性...

    JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)

    一般原理是“当点击发送按钮时,发送ajax请求到服务器发送短信验证码,成功则把发送按钮设置为不可点击,并且调用定时器,按钮显示倒计时”。如果就这样不对倒计时存储做处理,那么当刷新页面,会出现倒计时失效,...

    获取短信验证码倒计时

    在IT行业中,尤其是在Web开发和手机应用开发领域,获取短信验证码倒计时是一个常见的功能,它主要用于增强用户体验,确保用户在请求短信验证码后不会频繁发送,同时也为服务器提供了一定的保护,避免短时间内大量...

    jquery表单中获取短信验证码倒计时

    在jQuery中实现表单中的短信验证码倒计时功能是一项常见的前端交互设计,它增强了用户体验,同时也确保了用户在请求验证码后必须等待一段时间才能再次发送,防止滥用系统资源。以下将详细讲解如何使用jQuery来实现这...

    ios-按钮倒计时.zip

    在iOS开发中,按钮(UIButton)倒计时功能是一个常见的需求,例如在用户发送短信验证码后,为了防止频繁发送,通常会设置一个等待时间,在这段时间内按钮会被禁用并显示剩余时间,直到倒计时结束才能再次触发按钮...

    react-react验证码倒计时组件

    在React开发中,创建一个验证码倒计时组件是常见的需求,尤其在用户验证身份或发送短信验证码的场景中。这个组件通常包含一个按钮,点击后启动倒计时,期间按钮变为不可点击,倒计时结束后按钮恢复原状,允许用户...

Global site tag (gtag.js) - Google Analytics