前言

页面上很多地方我们会用到定时刷新，比如定时获取账户余额，或者定时获取列表信息，特别是商城一类的网站用的格外多，今天项目里面正好用到了，就来捋一下思路，大家有需要可以参考呀～

实现

大家在实战项目中，可能会有封装组件的现象，或者等等情况使数据涉及多个页面，如果是这种情况的话，大家可以把用到的数据写在vuex里面，不管在哪个页面就都能获取到最新值啦，今天把数据放在一个页面里给大家讲解，因为多个页面的话，写起来可能会比较乱。

第一步：设置变量

页面

<div v-if="loading" class="refresh-con">
  <a-space>
    <loading-outlined />
  </a-space>
</div>
<div v-else>refresh</div>

//我页面上的loading样式 是用的vue ant-design里面的 用的话不要忘记引入哦 也可以换成别的loading图标
import { LoadingOutlined } from '@ant-design/icons-vue'

export default defineComponent({
  components: { LoadingOutlined },
})

我们来设置几个我们会用到的变量

//定时器变量 方便在页面销毁的时候清楚定时器
const timer = ref<any>(null)
//页面在刷新的时候可以加loading显示 方便页面展示
const loading = ref(false)
//使countdown定时增加 如果增加到我们想要的时间 也就是变量autoRefreshTime 执行刷新
const countdown = ref(0)
//定时刷新的时间 现在设置的为6 也就是6秒刷新一次数据
const autoRefreshTime = ref(6)

第二步：关键代码 逻辑

onMounted(() => {
  timer.value = window.setInterval(() => {
    console.log(countdown.value, 'countdown')
    //不loading的时候才会执行
    if (!loading.value) {
    //countdown小于我们想要的定时时间的时候 定时器也是一秒执行一次 就继续+1 
      if (countdown.value < autoRefreshTime.value) {
        countdown.value = countdown.value + 1
        //当定时器到时间的时候 去干我们想干的事情 refresh()
        if (countdown.value === autoRefreshTime.value) {
          refresh()
        }
      }
    }
  }, 1000)
})

const refresh = () => {
    loading.value = true
    //当然这里面可以重新获取你想要的数据，我就打印了一下
    console.log('refresh')
    //然后这个定时器可以不加，拿到想要的值后执行便可，即拿到数据后我们需要做的善后工作，重置初始值
    setTimeout(() => {
        loading.value = false
        countdown.value = 0
    }, 2000)
}

第三步：清除定时器

//千万别忘了在页面销毁前清楚定时器！！对应vue2 beforeDestroy钩子
onBeforeUnmount(() => {
  window.clearInterval(walletTimer)
})

总结

代码是不是非常简单，注释写的非常详细都在里面了，可以结合gif看代码，快写起来吧！如果涉及多个页面的话，除了定时器timer变量，另外三个可以集中管理状态！