标题已经基本解释了,但我想每秒执行一个函数。
我还没有尝试过什么,也没有太多有用的代码。
我已经搜索了一些资料,到目前为止没有找到任何例子可以帮上忙。
此外,我正在使用laravel 5.6
这不起作用,用于调用countDown()方法。
export default {
ready() {
window.setInterval(() => {
this.countDown();
},1000);
},
标题已经基本解释了,但我想每秒执行一个函数。
我还没有尝试过什么,也没有太多有用的代码。
我已经搜索了一些资料,到目前为止没有找到任何例子可以帮上忙。
此外,我正在使用laravel 5.6
这不起作用,用于调用countDown()方法。
export default {
ready() {
window.setInterval(() => {
this.countDown();
},1000);
},
为了汇总解决方案(因为我无法编辑),下面的代码可以工作。有一个要点是,您还希望在视图销毁时停止作业,因此您需要在调用beforeDestroy
钩子时清除它。
mounted: function () {
this.timer = setInterval(() => {
this.countDown()
}, 1000)
},
data() {
return {
timer: null
}
},
beforeDestroy() {
clearInterval(this.timer)
}
beforeUnmount
钩子代替beforeDestroy
。 - vittorio上面发布的答案由于$nextTick的作用每秒都会被触发,因此如果您想设置不同的时间间隔,请删除$nextTick(在我的情况下,我将其设置为30000,因为我需要每30秒触发一次)
mounted: function () {
window.setInterval(() => {
this.getNotifications()
}, 30000)
}
谢谢大家,我找到解决方案了,只需要在谷歌上问对问题就可以了 :)
mounted: function () {
this.$nextTick(function () {
window.setInterval(() => {
this.countDown();
},1000);
})
}
$nextTick
?无论如何,您的间隔回调函数都会等待一秒钟才开始执行。 - Philcreated() {
this.interval = setInterval(() => this.getNotifications(), 3000);
}
<script setup>
import { onMounted, onBeforeUnmount, ref } from "vue";
const timer = ref();
function countDownFunc() {
console.log("Running countDownFunc")
...
}
// Instantiate
onMounted(() => {
timer.value = setInterval(() => {
countDownFunc();
}, 3000);
});
// Clean up
onBeforeUnmount(() => {
timer.value = null;
});
</script>
created: function() {
const timer = setInterval(() => {
this.countDown();
}, 1000);
this.$once("hook:beforeDestroy", () => {
clearInterval(timer);
});
}
ready()
函数? - Philready
的生命周期钩子。https://vuejs.org/v2/api/#Options-Lifecycle-Hooks - Jacob Goh