vue中setTimeout切换浏览器页签时怎么清除解决方案
大家都知道,vue中有完整的生命周期,this.$router.push('')可以跳到相应的页面中,在beforeDestroy中可以监听到,将定时器清空,又或是通过this._isDestroyed,可以判断出是否还在当前生命周期中,true为不在,false为还在;
今天要说的是在浏览器打开新窗口的情况下将上一页面的定时器清空;
代码如下:
export: {
methods: {
/***
*定时器刷新接口
* */
timeRefresh(){
if(this.isLeave) return false;
//你所需要定时刷新请求的方法OR接口 5秒一刷新
this.refreshData = window.setTimeout(this.timeRefresh, 5000);
}
},
mounted() {
this.timeRefresh();
let self = this;
//此方法可以监听到浏览器切换页面,也就是离开当前页面时的动态;为了保险起见,建议在beforeDestroy中也清空定时器;
document.addEventListener('visibilitychange',() => { //浏览器tab标签切换事件
if(document.visibilityState == 'hidden') { //状态判断 没在当前页面呆着
self.isLeave = true;
if(self.refreshData) window.clearTimeout(self.refreshData); self.refreshData = null;
}else { //回来了
self.isLeave = false;
self.refreshData = setTimeout(self.timeRefresh, ((new Date).getTime() % 5000));
}
});
},
data() {
return {
isLeave: false,//定义变量判断是否还停留在当前此页面中
refreshData : null,//定时器定义变量
}
}
}
vue中setTimeout切换浏览器页签时怎么清除解决方案的更多相关文章
- EBS OAF开发中怎样实现功能页签(Global Tab)
EBS OAF开发中怎样实现功能页签(Global Tab) (版权声明.本人原创或者翻译的文章如需转载.如转载用于个人学习,请注明出处.否则请与本人联系,违者必究) 功能页签的实现不须要不论什么编码 ...
- JS强制关闭浏览器页签并且不提示关闭信息
工作中很多奇葩的需求都会出现,现在就有一个问题,描述如下: 现在的登录跳转权限页面要去掉,集成在第三方系统信息上,当退出登录的时候需要关掉打开的Tab页面,因此考虑使用window.close()关闭 ...
- vue中input输入第一个字符时,光标会消失,需要再次点击才能输入
vue中input输入第一个字符时,光标会消失,需要再次点击才能输入 在这里我犯了一个小错误,v-if语法比较倾向于一次性操作,当input获取焦点时,v-if判断为true,立即刷新数据,进行渲染, ...
- vue中解决chrome浏览器自动播放音频 和MP3语音打包到线上
一.vue中解决chrome浏览器自动播放音频 需求 有新订单的时候,页面自动语音提示和弹出提示框: 问题 chrome浏览器在18年4月起,就在桌面浏览器全面禁止了音视频的自动播放功能.严格地来说, ...
- vue中,对象数组多层嵌套时,更新数据更新页面
vue中的对象和数组的元素直接赋值修改时,是不能响应到view中去的 1.对象更新 this.a={title:'列表1’}; this.a.title='列表2’; <h1>{{a.ti ...
- vue中使用iview表单验证时this指针问题
需求 使用iview,在提交时对值b进行验证,使其不能大于值a 实现 <Form ref="config" :model="config" :rules= ...
- VUE中实现iview的图标效果时遇到的一个问题
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available ...
- 记一笔vue中的中央事件总线的问题,以及解决方案
代码结构:首先HeaderNav组件是被单独拎出来的,router-view中就对应了内容组件,由于有时候i有的界面的header内容是不一样的,因此要用到兄弟组件的相互通信,这个时候我首先选择了bu ...
- vue中toggle切换的3种写法
前言:查看下面代码,在任意编辑器中直接复制粘贴运行即可 1:非动态组件(全局注册2个组件,借用v-if指令和三元表达式) <!DOCTYPE html> <html> < ...
随机推荐
- [USACO10FEB] 吃巧克力Chocolate Eating (二分答案)
题目链接 Solution 先直接二分答案,然后贪心判断,一旦少于答案就吃一块. 思路很简单,有一点细节. 一天内可以不吃巧克力. 注意处理最后时没吃完的全部在最后一天吃完. Code #includ ...
- Rabin算法
中国剩余定理 如果已知n的素因子,那么就能够利用中国剩余定理求解方程组.用现代数学的语言来说明就是,中国剩余定理给出了以下的一元线性同余方程组有解的判定条件: 一般而言,如果n的素因子可以分解为: \ ...
- el-tree或者el-table里边的slot-scope传递变量但是没有元素对象解决方法
传统的是点击一个元素可以通过e.target进行获取,但是对于这种的回调函数里边加个e再进行e.target就获取不到元素了,更获取不到点击的位置那么可以在触发的地方写成箭头函数并且传递一个变量.如下 ...
- 牛客假日团队赛9 A 乘积最大 (简单DP)
题目:https://ac.nowcoder.com/acm/contest/1071/A 题意:给你一个串,然后给你m个乘号,用m个乘号分割开这个串,然后求分割可以求出的最大值 思路:首先范围很小 ...
- codeforces 111C/112E Petya and Spiders
题目: Petya and Spiders传送门: http://codeforces.com/problemset/problem/111/C http://codeforces.com/probl ...
- 学习React之前你需要知道的的JavaScript基础知识
在我的研讨会期间,更多的材料是关于JavaScript而不是React.其中大部分归结为JavaScript ES6以及功能和语法,但也包括三元运算符,语言中的简写版本,此对象,JavaScript内 ...
- appium desktop 定位弹出框时报错
今天在定位真机APP的时候,弹出框的内容死活定位不到,只能定位到背景的内容. 问题:appium desktop 定位弹出框时报错,定位不到,只能定位到背景的内容. 分析: 定位工具找不到弹出框的元素 ...
- AGC024B Backfront
题目大意 给你一个1~n的排列 你有两个操作:将一个数移到最后或将一个数移到最前 问将排列排序最少要几次操作 分析 年纪大了,脑子不行了.. 实际我们只需求出对与一段连续的数它在排列中已经有序的最长长 ...
- 公司-IT-SanSan:SanSan
ylbtech-公司-IT-SanSan:SanSan 毫不费力的组织.无缝简单.基于名片的联系人管理 SanSan是一个名片管理应用,为企业提供内部联系人管理和分享服务,此外该公司也是日本最大的.基 ...
- hive sql基础了解
会有些不一样 1 例如使用SQL 之前,要了解用了那个库,use jz_daojia 2 使用GET_JSON_OBJECT 函数等,以及参数 匹配 $.childBrithDay 挺有意思的.新玩意 ...