• 发送短信验证码的倒计时一直停留在60秒,没有开始倒计时


    关注 码龄 粉丝数 原力等级 -- 被采纳 被点赞 采纳率 我妈已经三天没打我了 2024-06-28 14:45 采纳率: 88.2% 浏览 6 首页/ 前端 / 发送短信验证码的倒计时一直停留在60秒,没有开始倒计时 前端 为什么发送短信验证码的倒计时一直停留在60秒,没有开始倒计时

    {{ isSending ? count + '秒' : '获取验证码' }}

    .code.disabled { background-color: #ccc; cursor: not-allowed; } data: function() { return { isSending: false, // 用来跟踪是否正在发送验证码或倒计时 count: 60, // 倒计时初始值 } }, codeDialog() { if (!this.img_id) { this.drawing(); layer.open({ content: '请输入正确的图形验证码', skin: 'msg', time: 2 //2秒后自动关闭 }); return false; } if (!this.captcha) { layer.open({ content: '请输入短信验证码', skin: 'msg', time: 2 //2秒后自动关闭 }); return false; } if (this.isSending) { // 如果正在发送或倒计时中,则不执行任何操作 return; } this.isSending = true; // 开始发送验证码或倒计时 // this.count = 60; // 重置倒计时 $.ajax({ url: commonUrl + 'send/code', type: 'post', data: JSON.stringify({ "img_id":this.img_id }), dataType: 'json', contentType: 'application/json', success: function(res) { if (res.result_code == '0') { if (that.captcha) { layer.open({ content: '验证码已发送,5分钟内有效。若60秒内没有收到验证码,请点击重新发送', skin: 'msg', time: 4 //2秒后自动关闭 }); } // 开始倒计时 var timer = setInterval(() => { // 使用箭头函数 this.count--; if (this.count == 0) { clearInterval(timer); this.isSending = false; // 倒计时结束,允许再次点击 this.count = 60; // 重置倒计时,如果需要的话 } }, 1000); }else{ layer.open({ content: '失败:'+res.result_message, skin: 'msg', time: 2 //2秒后自动关闭 }); this.isSending = false; // 发送失败,允许再次点击 } }, error: (xhr, status, error) => { this.isSending = false; // 发送失败,允许再次点击 } }) }, 展开全部 收起 写回答 好问题 0 提建议 追加酬金 关注问题 微信扫一扫 点击复制链接 分享 邀请回答 编辑 收藏 删除 结题 收藏 举报 追加酬金 (90%的用户在追加酬金后获得了解决方案) 当前问题酬金 ¥ 0 (可追加 ¥500) ¥ 15¥ 20¥ 50¥ 100¥ 200 支付方式 扫码支付 二维码出错 点击刷新 支付金额 15 元 提供问题酬金的用户不参与问题酬金结算和分配 支付即为同意 《付费问题酬金结算规则》 结题 再想想 删除 再等等

    1条回答 默认 最新

    • 专家-赤兔[在线] 全栈领域优质创作者 2024-06-28 14:52
      关注

      引自免费微信小程序:皆我百晓生

      这个问题似乎是因为你在启动倒计时之前没有正确地将 isSending 设为 true 并且初始化了 count 值,还有可能因为定时器的逻辑可能出现了问题。这是可能的解决方案。请按照下面的修改试试。我将展示代码的变化以及解决倒计时停留问题的关键步骤。

      首先,在发送验证码前初始化 countisSending 的状态,确保 count 被设置为正确的初始值(例如 60 秒),并且 isSending 被设置为 true 表示开始倒计时。然后,启动倒计时器。在倒计时结束时清除定时器并重置状态。以下是修改后的代码片段:

      在你的 codeDialog() 函数中,在开始发送验证码之前添加以下代码来初始化 countisSending

      this.count = 60; // 设置倒计时的初始值
      this.isSending = true; // 设置正在发送验证码或倒计时的状态为 true
      

      然后,在启动倒计时的部分(通常在 AJAX 请求成功回调中),使用自执行的定时器函数来开始倒计时:

      // 开始倒计时
      var timer = setInterval(() => { // 使用箭头函数保持this指向vue实例的上下文
          if (this.count > 0) { // 确保count不为零,否则已经倒计时结束,无需再次计时
              this.count--; // 每秒减少一秒计数
              if (this.count === 0) { // 当倒计时结束时执行以下操作
                  clearInterval(timer); // 清除定时器防止继续计数
                  this.isSending = false; // 倒计时结束,允许再次点击获取验证码按钮(根据业务逻辑设置)
                  this.count = 60; // 重置倒计时到初始值(如果需要的话)
              }
          }
      }, 1000); // 每秒执行一次定时器函数
      

      确保你的模板中的显示逻辑也更新了以反映这些更改。模板中的显示部分应该能够正确地根据 isSendingcount 的值显示倒计时的剩余时间或者“获取验证码”的按钮。此外,你的样式也应该反映出 isSending 状态的变化,比如当倒计时进行时显示不同的背景颜色或禁用状态。请确保这些逻辑也更新了。

      评论 编辑记录
      编辑
      预览

      报告相同问题?

    • 相关阅读:
      电子管晶体管示波器电路图
      虚幻4学习笔记(14)界面切换、局域网联机
      Spring Ioc源码分析系列--Ioc容器BeanFactoryPostProcessor后置处理器分析
      java计算机毕业设计体育用品购物系统源码+系统+数据库+lw文档
      IP地址简介
      如何计算Renko大小,FPmarkets用ATR3步计算
      请问用Java怎么解
      如何使用ZIP方式安装MySQL:简单、快速、高效的安装方法
      如何查看 Windows 服务器中的登录事件
      ifort + mkl + impi (全套intel)编译安装量子化学软件GAMESS 2022 R1版本
    • 原文地址:https://ask.csdn.net/questions/8125040