如何在Vue3中做一个简单的倒计时？
如何在Vue3中做一个简单的倒计时？
提问于 2021-01-08 22:52:59
我一直试图建立一个简单的倒计时使用Vue3，但我无法使它正常工作。这很容易做出反应，但我根本不理解Vue (3)中的逻辑。所以，我想出了这个：
<script>
export default {
data() {
return {
timer: 10,
interval: ""
}
},
emits: ["start-game"],
methods: {
startGame() {
this.$emit("start-game")
this.startTimer()
},
startTimer() {
clearInterval(this.interval)
while(this.timer != 0) {
this.interval = setInterval(() => {
this.timer--
}, 1000)
}
}
}
}
</script>您可能认为这是可行的，但它会创建一个无限循环。不知何故，您不能只在vue方法中使用while。如果我删除了while，它实际上会无限期地向下计数，但是当计时器用完时，我需要运行其他函数(点击0)。处理这些事情的方法是什么？
回答 3
Stack Overflow用户
回答已采纳
发布于 2021-01-08 23:03:50
不要认为这与反应或价值有任何关系。您需要清除setInterval回调中的间隔，以便它知道何时停止。不需要while循环：
this.interval = setInterval(() => {
if (this.timer === 0) {
clearInterval(this.interval)
} else {
this.timer--
}
}, 1000)还可以查看这个纯js示例：
let timer = 10;
let interval = setInterval(() => {
if (timer === 0) {
clearInterval(interval)
} else {
timer--
console.log(timer)
}
}, 1000)
Stack Overflow用户
发布于 2021-08-17 17:32:37
我也遇到了同样的麻烦，我对react-hook-timer的反应非常高兴，但在vue 3中没有反应。所以我做了，你有三个主要的特点：
- timer
- stopwatch
- time
对于您的用例，timer是您所需要的，请执行以下步骤：
npm i vue-timer-hook
<script setup>
import { useTimer } from "vue-timer-hook";
const timer = useTimer(10 * 1000, false);
const startGame = () {
timer.start()
}
watchEffect(() => {
if(timer.isExpired.value) {
console.warn('IsExpired')
}
})
</script>Stack Overflow用户
发布于 2022-02-03 15:04:53
为了让这件事起作用，我在mount()上做了这个
let this_ = this; // to make this available as a closure
setInterval(() => {
this_.$options.timer.bind(this_)(); // methods are available in $options, need to bind `this`
}, 1000)页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65637458
复制相关文章
相似问题
腾讯云开发者
