在vue的函数中使用setTimeout

self.distroyTimeout = setTimeout(()=>{

  self.initData()

},1000)

这时清除setTimeout需要在destoryed周期中进行

destoryed(){

  window.clearTimeout(this.distroyTimeout)

}

但是这样做在逻辑复杂的情况下还是出现了没有关闭setTimeout的情况,以下是一种更好的解决方案

let self = this

if(self && self.distroyTimeout){

  setTimeout(()=>{

    if(self && self.distroyTimeout){

      self.initData()
    }
  },1000) }

在这里distroyTimeout属性表示当前这个组件是否被销毁

vue中使用setTimeout的更多相关文章

  1. 清除定时器 和 vue 中遇到的定时器setTimeout & setInterval问题

    2019-03更新 找到了更简单的方法,以setinterval为例,各位自行参考 mounted() { const that = this const timer = setInterval(fu ...

  2. Vue中之nextTick函数源码分析

    Vue中之nextTick函数源码分析 1. 什么是Vue.nextTick()?官方文档解释如下:在下次DOM更新循环结束之后执行的延迟回调.在修改数据之后立即使用这个方法,获取更新后的DOM. 2 ...

  3. vue 中的translation操作----动态值

    在vue中,也会遇见translate的情况,这里顺带也可以带上如何查找页面中的元素的案例. 1.在加载过程中,有会遇见加载顺序先后的问题,然后查找页面元素null的情况,所以在mounted的钩子函 ...

  4. checkbox在vue中的用法小结

    关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样,之前对于vue插 ...

  5. 【转】简单理解Vue中的nextTick

    前言: Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick ...

  6. 简单理解Vue中的nextTick

    Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick. 一. ...

  7. vue中Axios的封装和API接口的管理

    前端小白的声明: 这篇文章为转载:主要是为了方便自己查阅学习.如果对原博主造成侵犯,我会立即删除. 转载地址:点击查看 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题 ...

  8. vue中使用html2canvas及解决html2canvas截屏图片模糊问题

    最近在项目中用到了html2canvas插件,遇到的一些坑写下来,与大家共勉. html2canvas  官方网站http://html2canvas.hertzen.com/index.html 这 ...

  9. 在vue中使用Echarts画曲线图(异步加载数据)

    现实的工作中, 数据不可能写死的,所有的数据都应该通过发送请求进行获取. 所以本项目的需求是请求服务器获得二维数组,并生成曲线图.曲线图的横纵坐标均从获得的数据中取得. Echarts官方文档: ht ...

随机推荐

  1. Note: ENDBOX: Scalable Middlebox Functions Using Client-Side Trusted Execution

    ENDBOX enable secure networking by client-Side trusted execution. What ENDBOX is a scalable middlebo ...

  2. If,for,range混合使用笔记-(VBA视频教程2:使用IF进行逻辑判断)

    -- 新建表格:#单元格a1-a100全部等于1的代码 Sub test() Dim i As Integer For i = To Range( Next End Sub -- 新建表格:#单元格a ...

  3. go语言实战教程:实战项目资源导入和项目框架搭建

    从本节内容开始,我们将利用我们所学习的Iris框架的相关知识,进行实战项目开发. 实战项目框架搭建 我们的实战项目是使用Iris框架开发一个关于本地服务平台的后台管理平台.平台中可以管理用户.商品.商 ...

  4. CF987A Infinity Gauntlet 模拟

    You took a peek on Thanos wearing Infinity Gauntlet. In the Gauntlet there is a place for six Infini ...

  5. .net core webapi框架

    折腾了一段时间..还是用ef比较熟,哈哈 参考地址:https://www.cnblogs.com/danvic712/p/10331976.html --jwt 参考地址:https://www.c ...

  6. xcode定期清理记录一下

    此文章仅适用于适用于使用Xcode的开发者. 长期不清理Xcode中的一些文件你会发现自己的mac硬盘越来越小,而且是这个其他占了绝大部分的硬盘,在网上搜索了很多办法都没找到如何清理这些其他 后来来来 ...

  7. JS——操作元素属性

    属性的操作包括:读和写 方法: 1)”.“操作 2)”[ ]“操作 eg: var oDiv = document.getElementById('div1'); var attr = 'color' ...

  8. 实现一个类似bootstrap的多级下拉菜单

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 安装xenserver过程中出现的问题

    运行环境:win10系统,神舟战神z7m-KP7GT型号笔记本,VMWare虚拟机,XenServer7.2.0,XenCenter7.2.0 5月22日下午安装上xenserver虚拟机,发现虚拟机 ...

  10. Java 打印PDF文档的3种情况

    以下内容归纳了通过Java程序打印PDF文档时的3种情形.即: 静默打印 显示打印对话框打印 打印PDF时自定义纸张大小 使用工具:Spire.PDF for Java Jar导入: 方法1:通过官网 ...