[Vue] vue中setInterval的问题
vue中使用setInterval
this.chatTimer = setInterval(() => {
console.log(this.chatTimer);
this.chatMsg();
}, 1000);
然后再组件销毁前进行清除
beforeDestroy() {
clearInterval(this.chatTimer);
this.chatTimer = null;
}
根据 setInterval 返回的 id 打印来看,请除定时器并没有成功
但是这样不行,定时器在局部更新的时候会多次赋值.更改了一种写法,加了一重判断之后依旧无法解决.
if (!this.chatTimer) {
this.chatTimer = setInterval(() => {
console.log(this.chatTimer);
this.chatMsg();
}, 1000);
}
解决
使用全局变量
window.chatTimer = setInterval(() => {
console.log(window.chatTimer);
this.chatMsg();
}, 1000);
destroyed() {
clearInterval(window.liaotianTimer);
},
最终解决
const chatTimer = setInterval(() => {
console.log(chatTimer);
this.chatMsg();
}, 1000);
this.$once('hook:beforeDestroy', () => {
clearInterval(chatTimer);
})
[Vue] vue中setInterval的问题的更多相关文章
- vue 项目中,定时器(setInterval)的写法
vue 项目中,定时器(setInterval)的写法: fetchJobList是一个方法,里面有dispatch一个action进行请求接口的代码. data () { return { inte ...
- vue项目中引入循环执行setInterval或者requestAnimationFrame的用法等
项目中循环计时处理某些方法的情况还是比较常见的,一般会用setInterval来处理,但是这个方法会似的页面卡顿等使用体验不好. 所以就使用浏览器提供的requestAnimationFrame方法, ...
- vue+element-ui中引入阿里播放器
1.在public文件下的index.html文件中插入以下代码: <link rel="stylesheet" href="https://g.alicdn.co ...
- 在使用 vscode 时 eslint 检测 .vue 文件中的less 部分内容
问题: 在使用 vscode 以及 eslint 来检测 基于 webpack 的 vue-cli 的项目中,eslint 无法检测到 .vue 文件中的less 部分内容. 解答: 1.通过 下载 ...
- webpack+vue-loader 在单独.vue组件中使用sass-loader编译sass报错问题not a valid Win32 applictation
如果webpack配置没有问题,在vue文件中编译sass/scss报上面的错误,大概是由于node-sass安装失败,重新卸载安装, 在国内安装node-sass失败的话,可以使用淘宝镜 ...
- vue.js中,input和textarea上的v-model指令到底做了什么?
v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...
- Vue.js中组件传参的方法 - 基于webpack模板
在Vuejs中, 组件之间的传参是今天第一次接触, 之前写的组件互相之间都是独立的, 弗敢专也, 必以分人 环境: node.js npm vue-cli 以上安装请自行百度 一.项目创建 $ vue ...
- Vue 实例中的生命周期钩子
Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻 ...
- vue 项目中实用的小技巧
# 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQu ...
- 如何在VUE项目中添加ESLint
如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...
随机推荐
- 容器化的Apache服务并监控
1:基础容器编译部署apache 1.1:pull一个ubuntu 16.04的镜像 sudo docker pull ubuntu:16.04 1.2:运行容器 sudo docker run -d ...
- Centos 7 Linux系统修改网卡名称为ethx
一.Centos7 系统安装完成后更改网卡名称方法 1.查看Centos7系统默认的网卡配置(eno16777736) [root@server ~]# ifconfig eno16777736: f ...
- Charles 连接手机抓包出现Unknown,一直无法抓包的问题解决
mac电脑安装了charles并且确保已经安装成功,https抓包需要安装的相关的证书已经安装,并且手机浏览器中输入chls.pro/ssl已经将证书下载完成,但是手机与电脑相连通过点击手机应用还是无 ...
- Java动态代理之JDK实现和CGlib实现
一:代理模式(静态代理) 代理模式是常用设计模式的一种,我们在软件设计时常用的代理一般是指静态代理,也就是在代码中显式指定的代理. 静态代理由 业务实现类.业务代理类 两部分组成.业务实现类 负责实现 ...
- 为什么说 Java 程序员到了必须掌握 Spring Boot 的时候?
Spring Boot 2.0 的推出又激起了一阵学习 Spring Boot 热,就单从我个人的博客的访问量大幅增加就可以感受到大家对学习 Spring Boot 的热情,那么在这么多人热衷于学习 ...
- C++解析头文件-Qt自动生成信号声明
目录 一.瞎白话 二.背景 三.思路分析 四.代码讲解 1.类图 2.内存结构声明 3.QtHeaderDescription 4.私有函数讲解 五.分析结果 六.下载 一.瞎白话 时间过的ZTMK, ...
- JAVA基础第五章-集合框架Map篇
业内经常说的一句话是不要重复造轮子,但是有时候,只有自己造一个轮子了,才会深刻明白什么样的轮子适合山路,什么样的轮子适合平地! 我将会持续更新java基础知识,欢迎关注. 往期章节: JAVA基础第一 ...
- 马蜂窝搜索基于 Golang 并发代理的一次架构升级
搜索业务是马蜂窝流量分发的重要入口.很多用户在使用马蜂窝时,都会有目的性地主动搜索与自己旅行需求相关的各种信息,衣食住行,事无巨细,从而做出最符合需求的旅行决策. 因此在马蜂窝,搜索业务交互的下游模块 ...
- Lumen框架—升级改造之路-仓储层
仓储层与逻辑层搭建 Lumen官方文档:https://lumen.laravel.com/docs/5.5 我的项目地址:https://github.com/BusinessL/big-lume ...
- 设计模式 | 外观模式/门面模式(facade)
定义: 为子系统中的一组接口提供一个一致的界面,此模式定义了一个高层接口,这个接口使得这一子系统更加容易使用. 结构:(书中图,侵删) 一个简洁易用的外观类 一个复杂的子系统 实例: 书中提到了理 ...