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

Question

为什么发送短信验证码的倒计时一直停留在60秒，没有开始倒计时

<div class="Pop-ups-code">
                    <input type="text" placeholder="请输入"/>
                    <p class="code"  @click="codeDialog" id="sendcodeid" :class="{ disabled: isSending }">{{ isSending ? count + '秒' : '获取验证码' }}</p>
                </div>

.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; // 发送失败，允许再次点击
              }
        })
        },

Answer 1

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

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

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

在你的 codeDialog() 函数中，在开始发送验证码之前添加以下代码来初始化 count 和 isSending：

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); // 每秒执行一次定时器函数

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