vue中使用setTimeout

在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属性表示当前这个组件是否被销毁

时间: 2024-11-05 22:30:37

vue中使用setTimeout的相关文章

清除定时器 和 vue 中遇到的定时器setTimeout问题

--------------VUE项目中遇到一个问题.a.vue 文件中触发setTimeout后,使用按钮跳转至其他页面,快速返回至a.vue页面后 发现定时器仍然在走. 例子:a.vue代码 window.setTimeout(function(){ window.location.href = "/serverMonitor?t="+ new Date().getTime(); },5000) 解决办法: window.setTimeout(function(){ if(this

better-scroll在vue中的应用

在我们日常的移动端项目开发中,处理滚动列表是再常见不过的需求了,以滴滴为例,可以是这样竖向滚动的列表,如图所示: 微信 -> 钱包->滴滴出行"体验效果. 什么是 better-scroll better-scroll 是一个移动端滚动的解决方案,它是基于 iscroll 的重写,它和 iscroll 的主要区别在 这里 .better-scroll 也很强大,不仅可以做普通的滚动列表,还可以做轮播图.picker 等等. 不少同学可能用过 better-scroll,我收到反馈最多

Vue中的better-scroll插件

Vue中的better-scroll插件 在需要的文件中添加 import BScorll from 'better-scroll'; 引用的示例代码: let scroll = new BScroll(Dom对象, {//options startX: 0, startY: 0 }) Vue获得Dom对象方法, <div v-el:food-wrapper></div>//定义对象 this.$els.foodWrapper//获取对象 (Vue 更新数据时是异步的,所以在数据未

better-scroll在vue中的坑

在我们日常的移动端项目开发中,处理滚动列表是再常见不过的需求了,以滴滴为例,可以是这样竖向滚动的列表,如图所示: 也可以是横向滚动的导航栏,如图所示: 可以打开"微信 -> 钱包->滴滴出行"体验效果. 我们在实现这类滚动功能的时候,会用到我写的第三方库,better-scroll. 什么是 better-scroll better-scroll 是一个移动端滚动的解决方案,它是基于 iscroll 的重写,它和 iscroll 的主要区别在这里.better-scroll

vue中$watch源码阅读笔记

项目中使用了vue,一直在比较computed和$watch的使用场景,今天周末抽时间看了下vue中$watch的源码部分,也查阅了一些别人的文章,暂时把自己的笔记记录于此,供以后查阅: 实现一个简单的$watch: 1 const v = new Vue({ 2 data:{ 3 a: 1, 4 b: { 5 c: 3 6 } 7 } 8 }) 9 // 实例方法$watch,监听属性"a" 10 v.$watch("a",()=>console.log(&

vue中使用BetterScroll(网上)

原文链接 BetterScroll 是一款重点解决移动端各种滚动场景需求的开源插件(GitHub地址),有下列功能支持滚动列表,下拉刷新,上拉刷新,轮播图,slider等功能.为了满足这些功能,better-scroll通过使用惯性滚动.边界回弹.滚动条淡入淡出来确保滚动的流畅.同时还支持很多API和事件,具体支持的事件可以查看官网讲的非常详细.由于它基于原生JavaScript 实现,不依赖任何框架,所以既可以原生 JavaScript 引用,也可以与目前前端 MVVM 框架结合使用,比如,其

详解Vue中的nextTick

Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick. 一.示例 先来一个示例了解下关于Vue中的DOM更新以及nextTick的作用. //模板 <div class="app"> <div ref="msgDiv">{{msg}}</div> <div v-if="msg1

better-scroll在vue中的使用

一.介绍 关于better-scroll的原文详细介绍请参考,这里只做总结 黄老师的文章<当 better-scroll 遇见 Vue>的详细介绍 better-scroll的api:点击 better-scroll的滚动原理 <div class="wrapper"> <ul class="content"> <li>...</li> <li>...</li> ... </u

05.vue中js动画与Velocity.js的结合

vue中js动画 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue中js动画</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head>