验证码倒计时防止刷新怎么设置_验证码延迟怎么解决[通俗易懂]

要实现的效果：当点击获取验证码后开始120s的倒计时，且刷新及关闭网页再重新打开也不会重新刷新。

代码逻辑实现原理：获取验证码跟倒计时用一个字段控制切换，当倒计时结束则显示获取验证码。点击获取验证码时保存一个120s后的Cookies。倒计时用到了vant2倒计时组件（这里也可以自己写），因为cookie是有时效的，所以不会因为刷新或者关闭页面就会变化，这也就是为什么不用localStore,因为关闭页面后localStore则不能动态改变。

代码如下：

          <div>
            <van-button
              v-if="countShow"
              class="count-button"
              block
              type="default"
              size="small"
            >
              <van-count-down
                :time="countDownTime"
                format="ss"
                @finish="countFinish"
              />
            </van-button>

            <van-button
              v-else
              class="count-button"
              block
              type="info"
              size="small"
              plain
              native-type="button"
              @click="handleGetPhoneCode"
            >
              获取验证码
            </van-button>
          </div>

import Cookies from 'js-cookie'

data(){
    return{
    countShow: false, //控制倒计时切换
    countDownTime: 120000,  //倒计时初始化时间，毫秒单位
    timer: null,  //循环计时器
    }
},
mounted() {
    //因为Cookies.get()不能获取expires，所以才设定value值为expires方便获取
    let cookiesTime = Date.parse(Cookies.get("key"));
    // 把要过期的时间转化为时间戳方便计算
    // Date.parse方法用来解析日期字符串，将日期格式转化为字符串（ES5）
    if (cookiesTime) {
      // 有cookie值则继续倒计时
      this.countShow = true;
      this.timer = setInterval(() => {
        let nowTime = Date.now();
        // Date.now方法返回当前时间戳
        this.countDownTime = cookiesTime - nowTime;
        if (this.countDownTime <= 0) {
          this.countFinish();
        }
      }, 1000);
    } else {
      this.countFinish();
    }
 },
methods: {
    //倒计时结束要执行的方法
    countFinish() {
      //清除计时器
      clearInterval(this.timer);
      //重置倒计时时间
      this.countDownTime = 120000;
       //切换回获取验证码
      this.countShow = false;
    },
//点击获取验证码
handleGetPhoneCode() {
    //获取验证码请求
    getCode(phone).then((res) => {
        //先清除定时器
        clearInterval(this.timer);
        // 设定120秒后的cookie值，值为设定的时间expires
        let expires = new Date(new Date().getTime() + 120000);
        Cookies.set("key", expires, { expires });
        // 把要过期的时间转化为时间戳方便计算
        // Date.parse方法用来解析日期字符串，将日期格式转化为时间戳（ES5）
        let cookiesTime = Date.parse(expires);
        //开始定时器循环
        this.timer = setInterval(() => {
          //每次循环都获取当前时间戳
          let nowTime = Date.now();
          // Date.now方法返回当前时间戳，因为每秒都执行一次循环，而cookiesTime是设定好不变的
          // 让转化后的cookie值减去当前时间，这时候countDownTime每秒钟就会减少1000毫秒
          this.countDownTime = cookiesTime - nowTime;
          if (this.countDownTime <= 0) {
            // 当倒计时小于0则初始化
            this.countFinish();
          }
        }, 1000);
        this.countShow = true;
      });
    },
}

知识拓展：

vue操作cookies可用到js-cookie，具体查看前端设置cookie之vue-cookies_Cherry☼的博客-CSDN博客_vue设置cookie

若是不用vant倒计时组件，同样可设以定一个时间，原理一致。

今天的文章验证码倒计时防止刷新怎么设置_验证码延迟怎么解决[通俗易懂]分享到此就结束了，感谢您的阅读。