vue3 中实现 验证码发送 刷新不变倒计时

   今天实现一个倒计时的功能

   在平常开发前端的功能的时候 不管是 移动端还是web端 我们都会有注册 登录 中的发送验证码功能 实现绑定以及注册功能。今天我主要分享一下当前的验证码实现原理。

有两种做法(我目前认为以及看到的)

① 做一个简单的倒计时 

② 实时监测倒计时 刷新还是 当前的时间

倒计时 好做 

无非是一个 setTimeInterval  无非一个倒计时的函数

我只说这个 实时监测倒计时 刷新还是 当前的时间(基础版)

直接上代码

 <nut-button
                v-if="!yzData.countDownIng"
                :disabled="!formatPhoneInput()"
                size="mini"
                color="linear-gradient(to right, #5232B7,#7237BC)"
                @click="getCodeYZM"
                style="font-size: 8px"
                type="danger"
                >验证码</nut-button
              >
              <nut-button
                style="color: #5232b7; display: block; width: auto; width: 50px"
                v-if="yzData.countDownIng"
                >{{ yzData.countDownTime }}s</nut-button
              >
              >

这个是按钮

const yzData = reactive({
  countDownTime: 60,
  timer: null,
  countDownIng: false,
});

//获取验证码倒计时
const countDown = () => {
  let startTime = localStorage.getItem("startTimeLogin-dp");
  let nowTime = new Date().getTime();
  if (startTime) {
    let surplus = 60 - parseInt((nowTime - startTime) / 1000, 10);
    yzData.countDownTime = surplus <= 0 ? 0 : surplus;
  } else {
    yzData.countDownTime = 60;
    localStorage.setItem("startTimeLogin-dp", nowTime);
  }

  yzData.timer = setInterval(() => {
    yzData.countDownTime--;
    yzData.getCodeDisabled = true;
    yzData.countDownIng = true;
    if (yzData.countDownTime <= 0) {
      localStorage.removeItem("startTimeLogin-dp");
      clearInterval(yzData.timer);
      yzData.countDownTime = 60;
      yzData.countDownIng = false;
    }
  }, 1000);
};
const initCount=()=>{
 let sendEndTime = localStorage.getItem("startTimeLogin-dp");
  if (sendEndTime) {
    yzData.countDownIng = true;
    countDown();
  }

}

onMounted(() => {
 initCount()
});

以上就是将倒计时时间存储在了当前的内存中每一次刷新 都是原来的倒计时时间 除非用户把内存删了 当然 用户一般也不懂这个 也不会去删的

initCount()函数 无非就是当用户刷新的时候 可以每次获取内存中的时间戳 其实逻辑也很简单 代码复制 直接就能使用

下面我说一下 当前的进阶版的倒计时

倒计时 不一定会非在注册验证码 的时候使用 如果在真正的业务逻辑中使用 假如 有十条数据 都需要用到不同的倒计时 我们该怎么办 我上面说的 只是 全局的一个倒计时  因为每个用户打开的注册 登录页面只有一个 如果十条数据都要用到不同的倒计时咋办？

 我还是直接上代码 我说一下我这里的业务逻辑 

这里有一个按钮 哈 我 这里会有不同的机器人 这个按钮点击的时候 会调用接口 后端异步更新商品 但是此时我不想让用户 频繁点击 因为要考虑到性能问题 所以我在这里做了一个倒计时 ，我一开始直接将这个上面的倒计时 用在这里了 发现可以使用 但是切换机器人 还是那个倒计时 不符合我的业务逻辑 所以我需要给每一个机器人一个倒计时对象

希望你能看懂我的业务逻辑再去看下面的代码

const yzData = reactive({
  countDownTime: 60,
  timer: null,
  countDownIng: false,
})
const STORAGE_KEY_PREFIX = 'SynchronizeProductTime-'
const resultYzData = ref({})
const yzDataList = ref([])
//获取验证码倒计时
const countDown = (robotId: any) => {
  let item: any = getCurrentItem(robotId)
  let startTime = localStorage.getItem(STORAGE_KEY_PREFIX + robotId)
  let nowTime = new Date().getTime()

  if (startTime) {
    let surplus = 60 - parseInt((nowTime - parseInt(startTime)) / 1000, 10)
    item.countDownTime = surplus <= 0 ? 0 : surplus
  } else {
    item.countDownTime = 60
    localStorage.setItem(STORAGE_KEY_PREFIX + robotId, nowTime.toString())
  }

  item.timer = setInterval(() => {
    item.countDownTime--
    item.countDownIng = true
    if (item.countDownTime <= 0) {
      localStorage.removeItem(STORAGE_KEY_PREFIX + robotId)
      clearInterval(item.timer)
      item.countDownTime = 60
      item.countDownIng = false
    }
  }, 1000)
}

// 清除与指定robotId关联的定时器
const clearTimerForRobotId = (robotId: string) => {
  const item = yzDataList.value.find(item => item.id === robotId)
  if (item && item.timer) {
    clearInterval(item.timer)
    item.timer = null
  }
}
const initCountDown = (robotId: any) => {
  clearTimerForRobotId(robotId)
  let startTime = localStorage.getItem(STORAGE_KEY_PREFIX + robotId)
  let item: any = getCurrentItem(robotId)

  if (startTime) {
    item.countDownIng = true
    countDown(robotId)
  } else {
    resetItemCountDown(item)
  }
}
//获取默认的倒计时item
const getCurrentItem = (robotId: any) => {
  let item: any = yzDataList.value.find(item => item.id === robotId)
  if (!item) {
    item = reactive({ ...yzData, id: robotId }) // 使用新的ID创建一个新的倒计时对象
    yzDataList.value.push(item) // 添加到列表中，如果需要的话
  }
  resultYzData.value = item // 更新当前选中的倒计时对象
  return item
}
//重置倒计时的使劲按 清楚倒计时
const resetItemCountDown = (item: any) => {
  item.countDownTime = 60
  item.countDownIng = false
  if (item.timer) {
    clearInterval(item.timer)
    item.timer = null
  }
}

按钮

<a-button
              type="primary"
              @click="syncRobotProduct"
              :disabled="resultYzData.countDownIng"
            >
              {{
                resultYzData.countDownIng
                  ? `同步当前机器人商品 ${resultYzData.countDownTime}`
                  : '同步当前机器人商品'
              }}
            </a-button>

yzDataList ： 当前你需要 给你的每一个数据整理出来 拿到Id 像我这样

data.list.forEach((item: any) => {
          yzDataList.value.push({
            id: item.id,
            countDownTime: 60,
            timer: null,
            countDownIng: false,
          })
        })

这个id 是区分当前倒计时重要的一点

clearTimerForRobotId： 方法  清楚当前机器人的时间timer 这个很重要 防止你切换机器人 性能 问题 因为你切换了其他的机器人 之前的那个timer 就要被停止

其他的代码都差不多了  主体部分就是 countDown  处理时间的 基本就和基础版的差不多了 就是存了一个id 代表不同的数据

大家可以看看 不懂的call 我就行