VUE中setTimeout和setInterval自动销毁案例

在Vue的大型单页应用中，在某个路由下，经常会出现需要延迟执行（setTimeout)或者间隔之心（setInterval）的函数，但是每次在页面destroy之前，都必须手动清理掉。

正常代码如下：

beforeDestroy() {
  this._timer && clearTimeout(this._timer);
}

但是如果一不小心，就会忘记，会造成意想不到的情况，那么有什么办法能避免这种情况吗？

当然有，那就是重新写一个setTimeout的方法（或者干脆劫持window.setTimeout)。

var _pageTimer = [];
Vue.prototype.setTimeout = (fn, time) => {
  let handler = window.setTimeout(fn, time);
  _pageTimer.push(handler);

  return handler;
}

在路由层面，当每次页面变更时，执行清理工作：

router.beforeEach((to, from, next) => { _pageTimer.map(handler => { window.clearTimeout(handler); }) })

再页面使用时，调用Vue的setTimeout，这样是不是方便多了呢？ setInterval也是一样的。

该方法还适用于对于页面异步请求的ajax处理，可以通过获取ajax的handler，在切面切换时，调用handler.abort() 取消请求，避免对服务器资源的不必要的压力。

补充知识：在vue中使用 setTimeout ,退出页面后,计时器没有销毁

问题：页面在使用 setTimeout 定时循环某方法，或者在两个页面之间跳转时间小于定时器的时间间隔时，定时器还在运行。

原因:当我们刷新页面时，会将当前页面之前创建的 setTimeout 以及其他定时器都清除掉,但是仅仅是路由切换是不会清除的。

data (){
 return{
 clearTime: ''
 }
},
mounted () {
 randomGet () {
 // 在 1分钟到 2分钟之间 不定时执行
   var r = Math.random() * (2 - 1) + 1
   var t = Math.ceil(r * 60000)
   // console.log(t)
   this.clearTime = setTimeout(() => {
    this.submit()
    this.randomGet()
   }, t)
  },
  submit () {
   console.log('aaaa')
  }
},
destroyed () {
 clearTimeout(this.clearTime) // 清除
}

以上这篇VUE中setTimeout和setInterval自动销毁案例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • VUE简单的定时器实时刷新的实现方法

    说明:我只是一个刚入门的小前端,你们可以指导我,但千万不要喷我,虽然我知道我很垃圾!人吗,都是要成长的!大佬,请多多指教!!! 我前段时间刚刚写了一个类似余股票的项目,上边的K线图是要实时去刷新的,所以要用vue做一个心跳,当然大家也可以选择用websocket,大佬们感觉肯定很简单,但是我只是一个刚入门的小前端,特此记录一下. 思路 其实思路很简单,首先要了解vue的生命周期和vue的内置函数,其思路就是先定义一个定时器,然后去定时请求后台,到最后关闭这个定时器,哈哈,是不是都是废话,但是确实

  • Vue实现双向绑定的方法

    Vue实现双向绑定的方法

    本文能帮你做什么? 1.了解vue的双向数据绑定原理以及核心代码模块 2.缓解好奇心的同时了解如何实现双向绑定 为了便于说明原理与实现,本文相关代码主要摘自vue源码, 并进行了简化改造,相对较简陋,并未考虑到数组的处理.数据的循环依赖等,也难免存在一些问题,欢迎大家指正.不过这些并不会影响大家的阅读和理解,相信看完本文后对大家在阅读vue源码的时候会更有帮助< 本文所有相关代码均在github上面可找到 https://github.com/DMQ/mvvm 相信大家对mvvm双向绑定应该都不

  • VUE中setTimeout和setInterval自动销毁案例

    在Vue的大型单页应用中,在某个路由下,经常会出现需要延迟执行(setTimeout)或者间隔之心(setInterval)的函数,但是每次在页面destroy之前,都必须手动清理掉. 正常代码如下: beforeDestroy() { this._timer && clearTimeout(this._timer); } 但是如果一不小心,就会忘记,会造成意想不到的情况,那么有什么办法能避免这种情况吗? 当然有,那就是重新写一个setTimeout的方法(或者干脆劫持window.set

  • vue 解决setTimeOut和setInterval函数无效报错的问题

    1.在vue项目中的js代码语法与之前使用js和jquery还是有所出入的,现遇到一个点击按钮出现倒计时30S的效果 相信大家对着两个函数都陌生,就是一个定时器,setTimeOut只执行一次,而setInterval会重复执行 需要注意的是:在setInterval不用的时候一定要用clearSetInterval关闭定时器. 2.按照最原始的倒计时效果,实现如下: //获取30s 控制操作倒计时 time(){ if(this.timeWait <= 0){ this.timeWait =

  • vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法

    一.vue中解决chrome浏览器自动播放音频 需求 有新订单的时候,页面自动语音提示和弹出提示框: 问题 chrome浏览器在18年4月起,就在桌面浏览器全面禁止了音视频的自动播放功能.严格地来说,是Chrome不允许在用户对网页进行触发之前播放音频.不光是这样,在页面加载完毕的情况下,用户没有click.dbclick.touch等主动交互行为,使用js直接调用.play() 方法的话,chrome都会抛出如下错误:Uncaught (in promise) DOMException: 解决

  • Vue中watch清除过期副作用的案例详解

    在这里就不过多说watch的用法了,主要了解一下如何清除过期的副作用 通过一个案例来说吧: 一个可搜索的下拉选择器,用户第一次进行搜索的时候网速比较慢,请求虽然被服务端正确响应了,但是数据一直没有传输到客户端,用户看下拉数据没变化 就第二次搜索.第二次搜索之后网速恢复正常了,第二次请求的数据很快就客户端接收且正确渲染:紧接着第一次的数据也被客户端接收且客户端正确渲染. 这样就可能存在这样一种情况,第一次请求,服务端响应了请求但数据还没被客户端接收的时候,有人修改了数据:然后用户又点击刷新,响应数

  • 快速掌握Node.js中setTimeout和setInterval的使用方法

    Node.js和js一样也有计时器,超时计时器.间隔计时器.及时计时器,它们以及process.nextTick(callback)函数来实现事件调度.今天先学下setTimeout和setInterval的使用. 一.setTimeout超时计时器(和GCD中的after类似) 在node.js中可以使用node.js内置的setTimeout(callback,delayMillSeconds,[args])方法.当调用setTime()时回调函数会在delayMillSeconds后 执行

  • JS中SetTimeout和SetInterval使用初探

    JS中SetTimeout和SetInterval使用初探

    一切尽在代码截图中,愿意和大家一起成长!可以喷,毕竟是菜鸟!  好了,废话不多说了,看具体实例代码吧! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="wraper">

  • JS中setTimeout和setInterval的最大延时值详解

    前言 JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成.而这篇文中主要给大家介绍的是关于JS中setTimeout和setInterval最大延时值的相关问题,需要的朋友们下面来一起学习学习吧. 先来看这样一段代码: function update() { loadData().then(function(data) { $('#content').html(data.content); var de

  • 在vue中使用Base64转码的案例

    在vue项目中有时会使用到Base6464转码,现将自己使用的一种方法记录,以供参考 1:安装依赖 npm install --save js-base64 2:在main.js中引入 const Base64 = require('js-base64').Base64 new Vue({ el: '#app', Base64 }) 3:在需要转码的文件中使用 const Base64 = require('js-base64').Base64 const exStr = Base64.enco

  • vue中echarts引入中国地图的案例

    如下所示: <div id="myChartChina" :style="{width: '100%', height: '500px'}"></div> mounted() { this.drawLine(); }, drawLine(){ // 基于准备好的dom,初始化echarts实例 var myChartContainer = document.getElementById('myChartChina'); var resizeM

  • Vue中关闭弹窗组件时销毁并隐藏操作

    背景:在dialog弹窗组件中执行mounted钩子,将数据初始化,等取消关闭弹窗后,发现mounted钩子不执行 原因:在vue的生命周期中,在页面初始化的时候mounted只会执行一次,关闭弹窗页面并没有销毁,所以不会再次执行 <select-experience-group :trialMoneyRecordID=trialMoneyRecordID :showExperienceGroup='showExperienceGroup' @closeCover="handleExper

随机推荐