Vue3 setup语法糖销毁一个或多个定时器(setTimeout/setInterval)

更新时间：2023年10月20日 11:42:58 作者：web小奶精

这篇文章主要给大家介绍了关于Vue3 setup语法糖销毁一个或多个定时器(setTimeout/setInterval)的相关资料,vue是单页面应用,路由切换后,定时器并不会自动关闭,需要手动清除,当页面被销毁时,清除定时器即可,需要的朋友可以参考下

背景

如果在页面/组件增加了定时器，就算跳转到其他页面，定时器也不会被清理，这时候就需要手动清理，不然会有意想不到的bug，也会影响性能。

提示

setTimeout是只执行一次，setInterval是循环执行，以下是用setTimeout举例子，如果想要用setInterval，替换一次方法就行。

setTimeout替换成setInterval
clearTimeout替换成clearInterval

销毁一个定时器

<script setup>
import {onMounted, onUnmounted} from "vue";

//注意哈，这里是个空
const timer = ref()

//先创建一个定时器
onMounted(() => {
  timer.value=setTimeout(() => {
    // do something
  }, 1500)
})

//在页面销毁之前先销毁定时器
onUnmounted(() => {
  clearTimeout(timer.value)
  timer.value=""
})

销毁多个定时器

<script setup>
import {onMounted, onUnmounted} from "vue";

//注意哈，是个数组，不是对象，当然用对象的方式也行
const timer = ref([])

//先创建数个定时器
onMounted(() => {
  timer.value.push(setTimeout(() => {
    // do something
  }, 1500))
  timer.value.push(setTimeout(() => {
    // do something
  }, 1800))
})

//在页面销毁之前先销毁定时器
onUnmounted(() => {
  for (const timerElement of timer.value) {
    clearTimeout(timerElement)
  }
  timer.value=[]
})

补充：要想setTimeout指向正确的值，可以使用如下方法：

1、使用箭头函数

export default {
 methods: {
  start: function () {
   setTimeout(() => {
    this.end()//娃娃消失
   }, 4000);
  }
 }
}

此时函数的this指向的是定义它的时候的对象，也就是this指向了data内中对应的变量。

总结

到此这篇关于Vue3 setup语法糖销毁一个或多个定时器(setTimeout/setInterval)的文章就介绍到这了,更多相关Vue3 setup语法糖销毁定时器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue+elementUI实现表单和图片上传及验证功能示例
这篇文章主要介绍了vue+elementUI实现表单和图片上传及验证功能,结合实例形式分析了vue+elementUI表单相关操作技巧,需要的朋友可以参考下
2019-05-05
vue学习笔记之指令v-text && v-html && v-bind详解
这篇文章主要介绍了vue学习笔记之指令v-text && v-html && v-bind详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-05-05
Vue使用pdfobject实现预览pdf的示例详解
PDFObject 是一个 JavaScript 库用来在HTML中动态嵌入 PDF 文档。这篇文章主要为大家详细介绍了使用pdfobject实现预览pdf的功能，需要的可以了解一下
2023-03-03
Vue+SpringBoot实现支付宝沙箱支付的示例代码
本文主要介绍了Vue+SpringBoot实现支付宝沙箱支付的示例代码，文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧
2021-06-06
浅谈Vuejs Prop基本用法
本篇文章主要介绍了Vuejs Prop基本用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
Vue3中无法为el-tree-select设置反选问题解析
这篇文章主要介绍了Vue3中无法为el-tree-select设置反选问题分析,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-04-04
vue 组件中slot插口的具体用法
这篇文章主要介绍了vue 中slot 的具体用法,包括子组件父组件的代码介绍，需要的朋友可以参考下
2018-04-04
vue代理和跨域问题的解决
这篇文章主要介绍了vue代理和跨域问题的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
vue原生input输入框原理剖析
这篇文章主要为大家介绍了vue原生input输入框原理剖析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
create vite 实例源码解析
这篇文章主要为大家介绍了create vite 实例源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11