如何在Vue.js 3中使用setInterval和clearInterval？

bvk5enib 于 2023-11-21 发布在 Vue.js

关注(0)|答案(2)|浏览(283)

我正在写一个应用程序，它使用一个定时器来每秒更新一次变量。它使用“setInterval”函数来启动定时器，并使用“clearInterval”函数来停止它。我不认为我有足够好的方法来做到这一点。
我尝试在setup函数中将计时器定义为ref变量，并在“onUnmounted”生命周期钩子中清除计时器，如下面的示例代码：

<script setup lang="ts">
import { ref, onUnmounted } from "vue";

const timer = ref(setInterval(() => {/* Bla bla bla. */}, 1000));

onUnmounted(() => {
  clearInterval(timer.value);
})
<script>

字符串
但是我不认为有必要让计时器响应，有更好的方法吗？或者我的代码是一个好的方法？

vue.js

来源：https://stackoverflow.com/questions/77395002/how-to-use-setinterval-and-clearinterval-in-vue-js-3

2条答案

按热度按时间

ws51t4hk1#

你的方法是在Vue应用程序中处理计时器的好方法。然而，正如你提到的，在这种情况下，使计时器响应是不必要的。相反，你可以直接将计时器ID分配给一个变量。下面是一个如何改进代码的例子：

<script setup lang="ts">
import { onUnmounted } from "vue";

let timerId = setInterval(() => {
  // Your code here
  console.log("Timer is running...");
}, 1000);

onUnmounted(() => {
  clearInterval(timerId);
});
</script>

字符串

赞(0）回复(0）举报 2023-11-21

dly7yett2#

如果可以使用库，请使用库https://vueuse.org/shared/useIntervalFn/

import { useIntervalFn } from '@vueuse/core'

const { pause, resume, isActive } = useIntervalFn(() => {
  /* your function */
}, 1000)

字符串
否则，创建一个可组合的

function useIntervalFn(cb: () => void, ms: number) {
   let int: number = 0;
   onMounted(() => int = setInterval(cb, ms));
   onUnmounted(() => clearInterval(int));
}

型

赞(0）回复(0）举报 2023-11-21

我来回答

如何在Vue.js 3中使用setInterval和clearInterval？

2条答案

相关问题

热门标签

最新问答