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的问题的更多相关文章

  1. vue 项目中,定时器(setInterval)的写法

    vue 项目中,定时器(setInterval)的写法: fetchJobList是一个方法,里面有dispatch一个action进行请求接口的代码. data () { return { inte ...

  2. vue项目中引入循环执行setInterval或者requestAnimationFrame的用法等

    项目中循环计时处理某些方法的情况还是比较常见的,一般会用setInterval来处理,但是这个方法会似的页面卡顿等使用体验不好. 所以就使用浏览器提供的requestAnimationFrame方法, ...

  3. vue+element-ui中引入阿里播放器

    1.在public文件下的index.html文件中插入以下代码: <link rel="stylesheet" href="https://g.alicdn.co ...

  4. 在使用 vscode 时 eslint 检测 .vue 文件中的less 部分内容

    问题: 在使用 vscode 以及 eslint 来检测 基于 webpack 的 vue-cli 的项目中,eslint 无法检测到 .vue 文件中的less 部分内容. 解答: 1.通过 下载 ...

  5. webpack+vue-loader 在单独.vue组件中使用sass-loader编译sass报错问题not a valid Win32 applictation

        如果webpack配置没有问题,在vue文件中编译sass/scss报上面的错误,大概是由于node-sass安装失败,重新卸载安装,   在国内安装node-sass失败的话,可以使用淘宝镜 ...

  6. vue.js中,input和textarea上的v-model指令到底做了什么?

    v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...

  7. Vue.js中组件传参的方法 - 基于webpack模板

    在Vuejs中, 组件之间的传参是今天第一次接触, 之前写的组件互相之间都是独立的, 弗敢专也, 必以分人 环境: node.js npm vue-cli 以上安装请自行百度 一.项目创建 $ vue ...

  8. Vue 实例中的生命周期钩子

    Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻 ...

  9. vue 项目中实用的小技巧

    # 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQu ...

  10. 如何在VUE项目中添加ESLint

    如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...

随机推荐

  1. [SDOI2011]染色 BZOJ2243 树链剖分+线段树

    分析: 区间合并,lcol是左端点的颜色编号,rcol是右端点的颜色编号,那么我们向上合并的时候,如果左儿子的rcol等于右儿子的lcol那么区间的sum--. 另外,如果重链顶的颜色等于重链顶的父节 ...

  2. mysql输入中文出现ERROR 1366

    MySQL输入中文出现如下错误: ERROR 1366: 1366: Incorrect string value: '\xE6\xB0\xB4\xE7\x94\xB5...' for column ...

  3. 分布式团队中沟通引发的问题, itest 解决之道

    导读: 从问题场景和 itest 优雅解决办法及示例2部分来阐述 1.问题场景: 研发团队是分散在几地的分布式团队,经常会因沟通引来一些问题.如下三图是开发觉得测试进度太慢,一番对话之后, 接下来他们 ...

  4. 二分搜索树实现Java的Map(下)

    二分搜索树Map public class BSTMap<K extends Comparable<K>,V> implements Map<K,V> { priv ...

  5. java实现开根号算法

    public static void main(String[] args) { long start = System.currentTimeMillis(); double target=9876 ...

  6. 【我们一起写框架】C#的AOP框架

    前言 AOP,大家都是听过的,它是一种面向切面的设计模式. 不过AOP虽然是被称为设计模式,但我们应该很少能看到AOP设计的框架.为什么呢? 因为,AOP单独设计的框架几乎是无法使用的.普遍的情况是, ...

  7. nginx漏洞分析与升级修复

    一 .此次漏洞分析 1 nginx HTTP/2漏洞 [nginx-announce] nginx安全公告(CVE-2018-16843,CVE-2018-16844)在nginx HTTP / 2实 ...

  8. Dynamics 365 CE在Pre Delete插件中应用Image

    微软动态CRM专家罗勇 ,回复327或者20190428可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me! 在插件中限制记录的删除是常见的场景,比如根据statuscode ...

  9. 如何通过免费开源的ERP Odoo打造企业全员营销整体解决方案

    应用场景的背景故事 在一些二级城市,往往线索的来源是通过企业当地口碑积累.熟人转介绍等线下的方式为主,利用互联网的模式往往很难奏效,企业面临的第一个问题就是如何把握线索真实的来源介绍的问题.在这个问题 ...

  10. LOJ #6051. 「雅礼集训 2017 Day11」PATH

    完了感觉最近留了好多坑的说,这题也是模模糊糊地会一点 首先我们发现题目要求的是单调不上升的序列个数,那么一个套路就是用值减去下标 然后考虑连续位置的限制,这个我们做一个置换然后尽量向后取 这样拿值和位 ...