Vue 3中如何延迟按钮初始事件实现倒计时跳转

你的问题出在点击按钮后立刻执行了countValue的减1操作，导致首次显示直接从5变4，而没有等待1秒。只需要调整倒计时逻辑，把数值更新的操作放到setTimeout内部，让首次点击后先等待1秒再开始倒计时即可。

修改后的完整代码： #

模板部分：

<div>
  <button @click="goHome" type="button" :disabled="disabledOnCount">Go Home in {{ countValue }} seconds</button>
</div>

脚本部分：

import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const countValue = ref(5)
const disabledOnCount = ref(false)

const goHome = () => {
  // 点击后先禁用按钮，避免重复点击
  disabledOnCount.value = true
  
  // 封装倒计时逻辑
  const countdown = () => {
    if (countValue.value > 0) {
      countValue.value -= 1
      setTimeout(countdown, 1000)
    } else {
      // 数值归0时执行路由跳转
      router.push({ name: 'home' })
    }
  }

  // 首次点击后延迟1秒启动倒计时
  setTimeout(countdown, 1000)
}

关键修改说明： #

• 把数值更新和递归逻辑抽成独立的countdown函数，避免点击后立刻修改countValue
• 点击按钮后先禁用按钮，再通过setTimeout延迟1秒启动倒计时，确保初始数值5能保持1秒后再变化
• 将路由跳转逻辑放在countdown的else分支，确保倒计时结束后才执行跳转

内容的提问来源于stack exchange，提问作者JS_is_awesome18