vue离开页面时如何销毁定时器

目录
  • vue离开页面销毁定时器
  • 组件里定时器销毁问题
    • 解决方法1
    • 解决方案2

vue离开页面销毁定时器

beforeDestroy() {
if(this.timer) {
　　　　clearInterval(this.timer); //关闭
　　 }  //利用vue的生命周期函数

vue 是单页面应用，路由切换后，定时器并不会自动关闭，需要手动清除，当页面被销毁时，清除定时器即可。

组件里定时器销毁问题

我在a页面写一个定时，让他每秒钟打印一个1，然后跳转到b页面，此时可以看到，定时器依然在执行。这样是非常消耗性能的。

如下图所示：

解决方法1

首先我在data函数里面进行定义定时器名称：

 data() {
   return {
    timer: null  // 定时器名称
   }
 },

然后这样使用定时器：

this.timer = (() => {     // 某些操作 }, 1000)

最后在beforeDestroy()生命周期内清除定时器：

beforeDestroy() {
  clearInterval(this.timer);
  this.timer = null;
}

方案1有两点不好的地方，引用尤大的话来说就是：

  • 它需要在这个组件实例中保存这个 timer，如果可以的话最好只有生命周期钩子可以访问到它。这并不算严重的问题，但是它可以被视为杂物。
  • 我们的建立代码独立于我们的清理代码，这使得我们比较难于程序化的清理我们建立的所有东西。

解决方案2

该方法是通过$once这个事件侦听器器在定义完定时器之后的位置来清除定时器。

以下是完整代码：

const timer = setInterval(() =>{ // 某些定时器操作   }, 500);
// 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
this.$once('hook:beforeDestroy', () => {
        clearInterval(timer);
})

类似于其他需要在当前页面使用，离开需要销毁的组件（例如一些第三方库的picker组件等等），都可以使用此方式来解决离开后以后在背后运行的问题。

综合来说，我们更推荐使用方案2，使得代码可读性更强，一目了然。如果不清楚$once、$on、$off的使用，这里送上官网的地址教程，在程序化的事件侦听器那里。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue(定时器)解决mounted不能获取到data中的数据问题

    vue中data定义 data() { return { isok:10, } } 在vue中使用定时器 如下 mounted是钩子函数 mounted(){ console.log(this.isok) //能获取isok 10 setInterval(function(){ console.log(this.isok) //不能获取 isok }, 3000); } 这是为什么呢? 原因就是:定时器的this是指向 window的. 那有什么方法来解决这个问题呢?答案是有的,两种 第一种:

  • vue通过定时器实现垂直滚动公告

    vue通过定时器实现垂直滚动公告

    前言 最近项目有个需求是做一个垂直滚动的公告,其中也涉及到了设置定时器和清除定时器方面的知识点,在这里记录下过程,不对的地方欢迎大家指正,一起共同进步! 思路 1. 写好样式,把滚动的内容循环出来,固定显示区域的高度,超出隐藏2. 设置定时器,将第一条数据塞到最后一个,删除第一条数据,暂停播放3. 在mounted中创建并执行定时器4. destroyed中清除定时器 HTML部分 <div class="roll">       <div class="r

  • vue setInterval 定时器失效的解决方式

    正常情况下,在data里定义homeSetInterval 保存定时器的ID值 ,在销毁组件是使用clearInterval方法是可行的 但在使用了如下的keep缓存模式在使用销毁模式不行了 应该使用离开路由器前方法beforeRouteLeave 补充知识:vue中使用定时器的坑 我们在使用vue的脚手架去搭建开发环境的时候,在A页面写入一个定时器去定时请求一个接口,但是我们去B页面,C页面的时候都会有这个接口定时请求的现象,那么怎样处理呢? 第一步: 首先我在data函数里面进行定义定时器名

  • vue如何设置定时器和清理定时器

    目录 设置定时器和清理定时器 1.在data中声明要设置的定时器名称 2.在mounted中创建定时器 定时器的使用全解 1.vue使用定时器 2代码实现 设置定时器和清理定时器 使用钩子函数对定时器进行清理,失败了 1.在data中声明要设置的定时器名称 data() {                 return {                                       timer: null  // 定时器名称               }         },

  • Vue如何优雅的清除定时器

    目录 前言 优化 衍生问题:beforeDestroy 没有触发? 前言 清除定时器,相信有相当一部分人是这么写的: export default { data() { reurn { timer: null } }, mounted() { this.timer = setInterval(() => { console.log('setInterval') }, 2000) }, beforeDestroy() { clearInterval(this.timer) } } 这是一段常见的代

  • vue离开页面时如何销毁定时器

    vue离开页面时如何销毁定时器

    目录 vue离开页面销毁定时器 组件里定时器销毁问题 解决方法1 解决方案2 vue离开页面销毁定时器 beforeDestroy() { if(this.timer) { clearInterval(this.timer); //关闭  }  //利用vue的生命周期函数 vue 是单页面应用,路由切换后,定时器并不会自动关闭,需要手动清除,当页面被销毁时,清除定时器即可. 组件里定时器销毁问题 我在a页面写一个定时,让他每秒钟打印一个1,然后跳转到b页面,此时可以看到,定时器依然在执行.这样

  • js 实现在离开页面时提醒未保存的信息(减少用户重复操作)

    Javascript代码 复制代码 代码如下: //在离开页面时判断是否有未保存的输入值 var hasSaved = false;//是否有输入的内容未保存标志,初始值为false function CheckUnsave(){ if(hasSaved==false){ alert("您上传的东西尚未保存,请保存后再离开页面"); return false;} //return true; //不能加这个语句 } //保存了则改变状态 function ChangeState() {

  • vue进入页面时滚动条始终在底部代码实例

    本文实例为大家分享了vue进入页面时滚动条始终在底部的具体代码,供大家参考,具体内容如下 mounted () { this.scrollToBottom(); }, //每次页面渲染完之后滚动条在最底部 updated:function(){ this.scrollToBottom(); }, methods:{ scrollToBottom: function () { this.$nextTick(() => { var container = this.$el.querySelector

  • vue刷新页面时去闪烁提升用户体验效果的实现方法

    首先在最外层div添加v-if="isReloadAlive",并创建变量isReloadAlive = true 随后添加provide()以及reload方法,如下: export default { provide() { return { reload: this.reload } }, data(){ isReloadAlive : true }, methods: { reload() { this.isReloadAlive = false; this.$nextTick

  • vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法

    这里是本小白使用时遇到的问题及个人使用的方法可能并不完美. 1.监测浏览器滚动条滚动事件及滚动距离 dmounted() { window.addEventListener("scroll", this.gundong); }, destroyed() { window.removeEventListener("scroll", this.gundong); }, methods: { gundong() { var dis = document.documentE

  • 离开页面时检测表单元素是否被修改,提示保存的js代码

    复制代码 代码如下: window.onbeforeunload = function() { if(is_form_changed()) { return "您的修改内容还没有保存,您确定离开吗?"; } } function is_form_changed() { var t_save = jQuery("#t_save"); //检测页面是否要保存按钮 if(t_save.length>0) { //检测到保存按钮,继续检测元素是否修改 var is_c

  • 基于jQuery实现的当离开页面时出现提示的实现代码

    复制代码 代码如下: //绑定beforeunload事件 $(window).bind('beforeunload',function(){ return '您输入的内容尚未保存,确定离开此页面吗?'; }); //解除绑定 $(window).unbind('beforeunload');

  • JS返回页面时自动回滚到历史浏览位置

    在我的系统实际开发过程中遇到一个需求,我需要让应用在各个页面间跳转时回到每页原先浏览到的位置,方便用户使用. 在网上查资料时,看到的方案有不少,众说纷纭,但真正给出可行可用代码的寥寥无几,所以我干脆按自己的想法用SessionStorage写了一个缓存页面的方法,在离开页面时将需要缓存的容器中所有内容都存到SessionStorage中,在返回页面时重新加载,方便用户操作,效果如下: 页面缓存 使用方法 用法也很简单,咱一步一步讲. 首先,在你需要缓存标签容器的类名中加入cache,并写一个na

  • vue返回上一页面时回到原先滚动的位置的方法

    项目结束,测试时发现在首页商品列表中,向上滑动几页后点击进入详情,从详情页面返回商品列表时,页面回到了最顶部,测试不通过说是用户体验不好,要求从哪里点击进去返回该页面时回到原先的滚动页面. 思路:因为vue是单页面应用,进入其他页面时会销毁该页面,用keep-alive不让其刷新,具体实现为: (1).在App.vue中加入: <template> <div id="app"> <!--<router-view/>--> <!--页

  • vue返回上一页面时不刷新问题及解决方案

    目录 返回上一页面时不刷新 前景 思路 说明 页面回退后,不刷新问题 问题描述 问题解决 返回上一页面时不刷新 前景 在日常使用的时候,我们经常需要返回上一级页面的时候,不刷新页面,保持页面不变,这里就需要使用以下方法: 思路 因为vue是单页面应用,进入其他页面时会销毁该页面,用keep-alive不让其刷新,具体实现为: (1).在App.vue中加入 这里是所有页面切换到地方,下面代码分别对不同的设置,采用不同的渲染方式. <template>   <div id="ap

随机推荐