笔记大全

vue怎么实现发送验证码计时器防止刷新

更新时间：2023-12-03

段落一：计时器基本原理及Vue的计时器实现方式计时器的实现，本质上是通过setInterval或者setTimeout等JavaScript方法对时间进行计算和定时操作。在Vue中，我们可以通过两种方式来实现计时器的效果： 1. 在Vue的生命周期中使用setInterval或者setTimeout方法 2. 结合Vue的定时器组件，使用内部封装好的方法进行计时操作代码示例：

1. 在Vue的生命周期中使用setInterval或者setTimeout方法：

2. 结合Vue的定时器组件，使用内部封装好的方法进行计时操作

段落二：防止刷新导致计时器的重新开始防止刷新导致计时器重新开始的问题，其原理是在浏览器的localStorage或sessionStorage中存储一个计时器的结束时间，每次进入页面时进行判断，若当前时间大于结束时间则计时器不进行计时操作，否则重新开始计时。在Vue中，我们可以使用插件或者直接在Vue实例中进行存储和判断操作。代码示例：

1. 使用插件进行localStorage的封装

class Storage {
  constructor(store) {
    this.store = store
  }

  set(key, value) {
    this.store.setItem(key, JSON.stringify(value))
  }

  get(key) {
    const value = this.store.getItem(key)
    return value ? JSON.parse(value) : null
  }

  remove(key) {
    this.store.removeItem(key)
  }

  clear() {
    this.store.clear()
  }
}

const localStorage = new Storage(window.localStorage)

const timer = {
  install(Vue) {
    Vue.prototype.$timer = {
      start(timerName, time, callback) {
        const now = Date.now()
        const endTime = localStorage.get(timerName)
        if (endTime && endTime > now) {
          // 计时器未结束
          const leftTime = endTime - now
          callback(leftTime)
          setTimeout(() => {
            this.start(timerName, time, callback)
          }, leftTime)
        } else {
          // 计时器已结束
          const endTime = now + time
          localStorage.set(timerName, endTime)
          callback(time)
          setTimeout(() => {
            this.start(timerName, time, callback)
          }, time)
        }
      },
      clear(timerName) {
        localStorage.remove(timerName)
      }
    }
  }
}

Vue.use(timer)

// 使用方式
this.$timer.start('verifyCode', 60 * 1000, leftTime => {
  console.log(`剩余时间：${leftTime}`)
})

2. 直接在Vue实例中进行存储和判断操作

段落三：计时器在多个页面共享的问题在多个页面中使用同一个计时器，需要通过StorageAPI将计时器的信息存储到localStorage或sessionStorage中，并在不同页面中进行同步操作。在Vue中，我们可以结合Vuex进行计时器状态的管理和分发。代码示例：

1. 使用localStorage进行状态的存储和同步操作

// 子页面中进行操作




// 父页面中进行操作

2. 使用Vuex进行状态的存储和同步操作

// store.js中进行操作
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
  leftTime: 0,
  timerName: 'verifyCode',
  timerEndTime: parseInt(localStorage.getItem('verifyCode')) || 0,
  timerInterval: 60 * 1000
}

const mutations = {
  setLeftTime(state, value) {
    state.leftTime = value
  },
  setTimerEndTime(state, value) {
    state.timerEndTime = value
    localStorage.setItem(state.timerName, value)
  }
}

const actions = {
  startTimer({ commit, state }) {
    if (state.timerEndTime > Date.now()) {
      commit('setLeftTime', Math.ceil((state.timerEndTime - Date.now()) / 1000))
    } else {
      commit('setTimerEndTime', Date.now() + state.timerInterval)
      commit('setLeftTime', Math.ceil(state.timerInterval / 1000))
    }
    const timer = setInterval(() => {
      commit('setLeftTime', state.leftTime - 1)
      if (state.leftTime === 0) {
        clearInterval(timer)
        commit('setTimerEndTime', 0)
      }
    }, 1000)
  }
}

const store = new Vuex.Store({
  state,
  mutations,
  actions
})

export default store

// 子页面中进行操作




// 父页面中进行操作

段落四：总结本文介绍了Vue中实现发送验证码的计时器，并解决了刷新导致计时器重新开始及在多个页面共享的问题。主要原理是通过JavaScript的计时器方法和StorageAPI实现。我们可以直接在Vue的生命周期中使用计时器方法，也可以使用封装好的计时器组件。防止刷新导致计时器重新开始，我们可以使用StorageAPI将计时器的结束时间进行存储和同步操作，也可以使用插件或Vuex进行状态的管理。在多个页面共享时，我们需要注意状态的同步和变化操作。

c语言编程笔录