vue中轮训器的使用


Posted in Javascript onJanuary 27, 2019

核心代码:

<template>
  <div >
   {{log}}
  </div>
</template>
<script>
  export default {
    name: "TrainingInRotation",
   data(){
    return {
     log:0,
     timerId:1, // 模拟计时器id,唯一性
     timerObj :{}, // 计时器存储器
    }
   },
   created(){
     this.startTraining();
   },
   methods: {
    /*
   * 开始轮训
   * */
    startTraining() {
     let this_ = this;
     const id = this.timerId++
     this.timerObj[id] = true
     async function timerFn() {
      if (!this_.timerObj[id]) return
      await this_.getData();
      setTimeout(timerFn, 1 * 1000)
     }
     timerFn();
    },
    /*
    * 停止轮训
    * */
    stopTime() {
     this.timerObj = {}
    },
    /*
    * 要轮训的代码
    * */
    getData(){
     this.log+=1;
     console.log("this.log:"+this.log);
    }
   },
   destroyed(){
    this.stopTime();
   }
  }
</script>
<style scoped>
</style>

效果图:

vue中轮训器的使用

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Javascript 相关文章推荐
php上传图片并给图片打上透明水印的代码
Jun 07 Javascript
javascript奇异的arguments分析
Oct 20 Javascript
IE的事件传递-event.cancelBubble示例介绍
Jan 12 Javascript
jQuery中filter()方法用法实例
Jan 06 Javascript
JS实现从网页顶部掉下弹出层效果的方法
Aug 06 Javascript
JS框架之vue.js(深入三:组件1)
Sep 29 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
Dec 16 Javascript
react-native使用leanclound消息推送的方法
Aug 06 Javascript
JavaScript作用域链实例详解
Jan 21 Javascript
详解Vue中使用插槽(slot)、聚类插槽
Apr 12 Javascript
vue中的v-if和v-show的区别详解
Sep 01 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
Nov 16 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
Jan 27 #Javascript
JavaScript变量提升和严格模式实例分析
Jan 27 #Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
Jan 27 #Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
Jan 27 #Javascript
原生JS检测CSS3动画是否结束的方法详解
Jan 27 #Javascript
原生JS实现的跳一跳小游戏完整实例
Jan 27 #Javascript
nuxt中使用路由守卫的方法步骤
Jan 27 #Javascript
You might like
shopex中集成的站长统计功能的代码简单分析
2011/08/11 PHP
浅析PHP微信支付通知的处理方式
2014/05/25 PHP
PHP实现多图上传(结合uploadify插件)思路分析
2016/11/30 PHP
php获取小程序码的实现代码(B类接口)
2020/06/13 PHP
9个JavaScript评级/投票插件
2010/01/18 Javascript
异步加载script的代码
2011/01/12 Javascript
js图片向右一张张滚动效果实例代码
2013/11/23 Javascript
解决json日期格式问题的3种方法
2014/02/02 Javascript
javascript封装的sqlite操作类实例
2015/07/17 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
2015/09/14 Javascript
jquery+json实现分页效果
2016/03/07 Javascript
javascript HTML5 canvas实现打砖块游戏
2020/06/18 Javascript
Easyui 之 Treegrid 笔记
2016/04/29 Javascript
如何使用jquery实现文字上下滚动效果
2016/10/12 Javascript
Vue2.0 vue-source jsonp 跨域请求
2017/08/04 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
2017/11/14 Javascript
vue给组件传递不同的值方法
2018/09/29 Javascript
JS使用对象的defineProperty进行变量监控操作示例
2019/02/02 Javascript
[56:13]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第一场 1月10日
2021/03/11 DOTA
[01:06:30]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第二场 1月9日
2021/03/11 DOTA
使用Python绘制图表大全总结
2017/02/11 Python
python 读写中文json的实例详解
2017/10/29 Python
Python面向对象class类属性及子类用法分析
2018/02/02 Python
Python爬虫框架Scrapy基本用法入门教程
2018/07/26 Python
Python3.5局部变量与全局变量作用域实例分析
2019/04/30 Python
Django中使用haystack+whoosh实现搜索功能
2019/10/08 Python
Django url 路由匹配过程详解
2021/01/22 Python
HTML5 画布canvas使用方法
2016/03/18 HTML / CSS
EQVVS官网:设计师男装和女装
2018/10/24 全球购物
库存图片、照片、矢量图、视频和音乐:Shutterstock
2021/02/12 全球购物
英国运动风奢侈品购物网站:Maison De Fashion
2020/08/28 全球购物
庆元旦活动总结
2014/07/09 职场文书
民族学专业职业生涯规划范文:积跬步以至千里
2014/09/11 职场文书
村党支部书记四风问题个人对照检查材料思想汇报
2014/10/06 职场文书
个人作风建设自查报告
2014/10/22 职场文书
python解析json数据
2022/04/29 Python