• 发送短信验证码的倒计时一直停留在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 状态的变化,比如当倒计时进行时显示不同的背景颜色或禁用状态。请确保这些逻辑也更新了。

      评论 编辑记录
      编辑
      预览

      报告相同问题?

    • 相关阅读:
      QT软件开发-基于FFMPEG设计视频播放器-支持流媒体地址播放(五)
      JS高级 之 防抖debounce - throttle节流
      k8s部署kafka,并使用zookeeper做注册中心
      简单总结下近期遇到的网络概念gcp、anycast IP、vlan
      经纬信息IPO过会:年营收3.5亿 叶肖华控制46.3%股权
      LDR6328Q,快充界的黑马
      第27集丨为人格补钙,让心灵吸氧
      ScienceQA
      Google单元测试框架gtest之官方sample笔记3--值参数化测试
      163-Angular项目和NodeExpress服务器发布(一)
    • 原文地址:https://ask.csdn.net/questions/8125040