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 相关文章推荐
js 获取子节点函数 (兼容FF与IE)
Apr 18 Javascript
js 设置选中行的样式的实现代码
May 24 Javascript
javascript最常用与实用的创建类的代码
Aug 12 Javascript
JQuery UI的拖拽功能实现方法小结
Mar 14 Javascript
jquery的ajax请求全面了解
Mar 20 Javascript
jquery实现表格本地排序的方法
Mar 11 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
Aug 21 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
Dec 08 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
Feb 23 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
Jan 20 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
Sep 10 Javascript
微信小程序静默登录的实现代码
Jan 08 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取进制余数函数代码
2012/01/19 PHP
php实现搜索一维数组元素并删除二维数组对应元素的方法
2015/07/06 PHP
PHP基于反射机制实现插件的可插拔设计详解
2016/11/10 PHP
Yii2使用$this-&gt;context获取当前的Module、Controller(控制器)、Action等
2017/03/29 PHP
PHP PDOStatement::bindColumn讲解
2019/01/30 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
php并发加锁问题分析与设计代码实例讲解
2021/02/26 PHP
Add Formatted Data to a Spreadsheet
2007/06/12 Javascript
javascript jQuery $.post $.ajax用法
2008/07/09 Javascript
javascript 冒号 使用说明
2009/06/06 Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
2010/08/27 Javascript
再论Javascript下字符串连接的性能
2011/03/05 Javascript
jquery select动态加载选择(兼容各种浏览器)
2013/02/01 Javascript
jquery实现的一个简单进度条效果实例
2014/05/12 Javascript
原生javascript实现的分页插件pagenav
2014/08/28 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
2014/09/13 Javascript
深入浅出理解javaScript原型链
2015/05/09 Javascript
基于JS2Image实现圣诞树代码
2015/12/24 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
javascript瀑布流布局实现方法详解
2016/02/17 Javascript
JS+CSS3实现超炫的散列画廊特效
2016/07/16 Javascript
JavaScript使用键盘输入控制实现数字验证功能
2016/08/19 Javascript
详解vue2父组件传递props异步数据到子组件的问题
2017/06/29 Javascript
小程序实现带年月选取效果的日历
2018/06/27 Javascript
浅谈Vue.use到底是什么鬼
2020/01/21 Javascript
vue-resource post数据时碰到Django csrf问题的解决
2020/03/13 Javascript
tensorflow 输出权重到csv或txt的实例
2018/06/14 Python
python 在threading中如何处理主进程和子线程的关系
2020/04/25 Python
python实现批处理文件
2020/07/28 Python
Ajax请求总共有多少种Callback
2016/07/17 面试题
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
群众路线领导班子四风对照检查材料
2014/09/27 职场文书
西安事变观后感
2015/06/12 职场文书
七年级英语教学反思
2016/02/15 职场文书
Python自然语言处理之切分算法详解
2021/04/25 Python
Python-OpenCV教程之图像的位运算详解
2021/06/21 Python