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 相关文章推荐
javascript 写类方式之二
Jul 05 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
Jan 28 Javascript
js获取iframe中的window对象的实现方法
May 20 Javascript
Bootstrap3制作搜索框样式的方法
Jul 11 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
Feb 08 Javascript
javascript作用域链与执行环境详解
Mar 25 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
Jun 02 Javascript
BootStrap 动态表单效果
Jun 02 Javascript
解决vue-cli中stylus无法使用的问题方法
Jun 19 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
Dec 07 Javascript
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
怎么理解wx.navigateTo的events参数使用详情
May 18 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
php 日期和时间的处理-郑阿奇(续)
2011/07/04 PHP
深入PHP异步执行的详解
2013/06/03 PHP
php等比例缩放图片及剪切图片代码分享
2016/02/13 PHP
超强多功能php绿色集成环境详解
2017/01/25 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
使用laravel和ECharts实现折线图效果的例子
2019/10/09 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
Yii中特殊行为ActionFilter的使用方法示例
2020/10/18 PHP
javascript操作excel生成报表示例
2014/05/08 Javascript
Javascript玩转继承(一)
2014/05/08 Javascript
js变量、作用域及内存详解
2014/09/23 Javascript
JS控制静态页面传递参数并获取参数应用
2016/08/10 Javascript
JS搜狐面试题分析
2016/12/16 Javascript
Javascript基础回顾之(一) 类型
2017/01/31 Javascript
动态统计当前输入内容的字节、字符数的实例详解
2017/10/27 Javascript
vue实现仿淘宝结账页面实例代码
2017/11/08 Javascript
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
如何能分清npm cnpm npx nvm
2019/01/17 Javascript
[57:29]Alliance vs KG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/17 DOTA
[37:21]完美世界DOTA2联赛PWL S2 Inki vs Magma 第二场 11.22
2020/11/24 DOTA
[16:01]夜魇凡尔赛茶话会 第二期01:你比划我猜
2021/03/11 DOTA
Python常用列表数据结构小结
2014/08/06 Python
python脚本设置超时机制系统时间的方法
2016/02/21 Python
浅谈python中的getattr函数 hasattr函数
2016/06/14 Python
python 数据清洗之数据合并、转换、过滤、排序
2017/02/12 Python
python 多进程共享全局变量之Manager()详解
2019/08/15 Python
Window版下在Jupyter中编写TensorFlow的环境搭建
2020/04/10 Python
Python如何在main中调用函数内的函数方式
2020/06/01 Python
Python读写锁实现实现代码解析
2020/11/28 Python
Html5游戏开发之乒乓Ping Pong游戏示例(一)
2013/01/21 HTML / CSS
HTML5之消息通知的使用(Web Notification)
2018/10/30 HTML / CSS
英国在线药房和在线药剂师:Chemist 4 U
2020/01/05 全球购物
信号量和自旋锁的区别?如何选择使用?
2015/09/08 面试题
入党积极分子学习优秀共产党员先进事迹思想汇报
2014/09/13 职场文书
幼儿园国培研修日志
2015/11/13 职场文书
国际最新研究在陨石中发现DNA主要成分 或由陨石带来地球
2022/04/29 数码科技