首页 > 其他分享 >Vue 组件里的定时器要怎么销毁?

Vue 组件里的定时器要怎么销毁?

时间:2023-11-14 19:35:09浏览次数:28  
标签:定时器 beforeDestroy clearInterval timer Vue 组件 页面

如果页面上有很多定时器,可以在 data 选项中创建一个对象 timer,给每个定时器取个名字一一映射在对象 timer 中, 在 beforeDestroy 构造函数中清除,

beforeDestroy(){
	for(let k in this.timer){
		clearInterval(k)
	}
}

如果页面只有单个定时器,可以这么做

const timer = setInterval(() =>{}, 500);
this.$once('hook:beforeDestroy', ()=>{
	clearInterval(timer)
})

标签:定时器,beforeDestroy,clearInterval,timer,Vue,组件,页面
From: https://www.cnblogs.com/yuhuo123/p/17832342.html

相关文章

  • 记录--Vue2屎山之 Table 屎山
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助前言Vue2将在2023年年底停止维护了,但是Vue2的代码却不会在2023年消失,还会越来越多;难以想象几十万行或者几百万行的Vue2代码迁移到Vue3,这是不可能办到的;老一点的前端程序员肯定经历过把大型项目从jQue......
  • VUE 前端读取excel表格内容
    <el-uploadclass="upload-demo":action="''":show-file-list="false":auto-upload="false":before-upload="beforeUpload":on-success="handleSuccess&quo......
  • vue3 AntV-X6 引入插件报错
    vue3AntV-X6引入插件报错:UncaughtTypeError:Cannotreadpropertiesofundefined(reading'ToolItem')vite引入路径的问题解决就是在引入插件的路径后面加上/lib:import{Keyboard}from'@antv/x6-plugin-keyboard/lib'直接写 import{Keyboard}from'@antv/......
  • vue基于vue-pdf实现pdf预览
    <template><divclass="pdf-container"><divclass="page-tool">文件名称扩展<divclass="page-tool-fixed"v-if="showTool"><spanclass="sc......
  • 如何实现元素的平滑上升?(vue和react版)
    首先我们看下我们有时候需要在官网或者列表中给元素添加一个动画使元素能够平滑的出现在我们的视野中。 如上图所示,我们在vue中可以自定义指令,当我们需要的时候可以直接使用。废话不多说直接上代码。首先我们创建一个vSlideIn.ts文件import{DirectiveBinding}from'vue......
  • Vue3调用Element-plus涉及子组件v-model双向绑定props问题
    Vue3调用Element-plus涉及子组件v-model双向绑定props问题在Vue3调用Element-plus的el-dialog组件时,碰到个很有意思的问题,el-dialog的属性值v-model直接控制对话框的显示与否,点击关闭对话框和遮罩区域,组件内部会自动更改v-model的值为false来关闭对话框。问题在于当组件作为子组......
  • vuejs3.0 从入门到精通——Pinia——定义Store
    定义Store Store是用defineStore()定义的,它的第一个参数要求是一个独一无二的名字:import{defineStore}from'pinia'//你可以对`defineStore()`的返回值进行任意命名,但最好使用store的名字,同时以`use`开头且以`Store`结尾。(比如`useUserStore`,`useCartStore......
  • 聊聊定时器 setTimeout 的时延问题
    全局的 setTimeout()  方法设置一个定时器,一旦定时器到期,就会执行一个函数或指定的代码片段,但是需要注意的是,setTimeout 并不是 ECMAScript 标准的一部分,不过几乎每一个JS运行时都支持了这个函数。定时器的使用比较简单,这里不再阐述,我们这篇文章主要聊下关于setTimeout有......
  • 在vue项目开发过程中,输入框以表单形式提交后,路径中多了问号?
    结果是:http://localhost:8100/#/  改变为  http://localhost:8100/?#/  导致路由跳转出现问题。 原因:这里是form表单,点击了button按钮,触发了他的默认事件,就是触发了提交这个行为。 解决方案:使用@click.prevent阻止默认事件 <a-buttontype="primary"@click.pr......
  • 树形/级联组件->数据做键,制作与还原
    数据的制作/**树形/级联组件->数据做键,制作与还原*@param{Array}list*@param{string}params源`json`的`key`*@param{string}key生成后`string`存放的`key`*@param{string}children下一级的`key`值*@returns*/exportconstTreeValueToKe......