微信小程序点击发送短信验证（60秒倒计时）

最新推荐文章于 2023-07-18 13:45:55 发布

原创最新推荐文章于 2023-07-18 13:45:55 发布 · 6.2k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序

微信小程序专栏收录该内容

8 篇文章

订阅专栏

本文介绍微信小程序中实现短信验证码发送后的60秒倒计时功能，通过JavaScript定时器控制，确保用户在一定时间内无法重复请求验证码，提高用户体验并节省短信成本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序点击发送短信验证（60秒倒计时）

  /**
   * 执行计时，60s后可以重新发送短信验证码
   */
  countdown: function() {
    var nsecond = 60;
    var that = this;
    var appCount = setInterval(function() {
      nsecond -= 1;
      that.setData({
        second: nsecond
      })
      if (nsecond < 1) {
        clearInterval(appCount);
        //取消指定的setInterval函数将要执行的代码 
        that.setData({
          send: true,
          second: 60,
          reSend: false
        })
      }
      console.log(nsecond);
    }, 1000);
  }

注意：声明变量的时候是 var appCount，这在当前页面是全局的，方便在其它位置清除它

    if (appCount) {
      clearInterval(appCount);
    }

需要在 Page.data 中定义 second：

Page({
  data: {
    send: false,
    second: 60,
    reSend: true
  }

send 和 reSend 是用来控制页面元素显示的。