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 相关文章推荐
IE Firefox 使用自定义标签的区别
Oct 15 Javascript
js数字输入框(包括最大值最小值限制和四舍五入)
Nov 24 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
Jan 03 Javascript
js获取select标签选中值的两种方式
Jan 09 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
Apr 16 Javascript
详解自动生成博客目录案例
Dec 09 Javascript
jQuery Validate插件自定义验证规则的方法
Dec 27 Javascript
微信小程序 地图map实例详解
Jun 07 Javascript
el-select数据过多懒加载的解决(loadmore)
May 29 Javascript
vue 判断元素内容是否超过宽度的方式
Jul 29 Javascript
js实现炫酷光感效果
Sep 05 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
Oct 27 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统计时间和内存使用情况示例分享
2014/03/13 PHP
php通过修改header强制图片下载的方法
2015/03/24 PHP
php数据序列化测试实例详解
2017/08/12 PHP
Linux基于php-fpm模式的lamp搭建phpmyadmin的方法
2018/10/25 PHP
PHP匿名函数(闭包函数)详解
2019/03/22 PHP
JQuery 前台切换网站的样式实现
2009/06/22 Javascript
再谈javascript图片预加载技术(详细演示)
2011/03/12 Javascript
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
2011/07/10 Javascript
php对mongodb的扩展(初识如故)
2012/11/11 Javascript
confirm的用法示例用于按钮操作时确定是否执行
2014/06/19 Javascript
JavaScript实现生成GUID(全局统一标识符)
2014/09/05 Javascript
d3.js入门教程之数据绑定详解
2017/04/28 Javascript
jQuery 表单序列化实例代码
2017/06/11 jQuery
详解webpack 多页面/入口支持&amp;公共组件单独打包
2017/06/29 Javascript
Angularjs中ng-repeat的简单实例
2017/08/25 Javascript
JS抛物线动画实例制作
2018/02/24 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
2018/09/11 Javascript
在vue中使用echarts图表实例代码详解
2018/10/22 Javascript
浅析vue-router中params和query的区别
2019/12/24 Javascript
python发送邮件接收邮件示例分享
2014/01/21 Python
Windows 7下Python Web环境搭建图文教程
2018/03/20 Python
Python统计单词出现的次数
2018/04/04 Python
对Python中的条件判断、循环以及循环的终止方法详解
2019/02/08 Python
python 读写excel文件操作示例【附源码下载】
2019/06/19 Python
Python统计分析模块statistics用法示例
2019/09/06 Python
C#里面可以避免一个类被其他类继承么?如何?
2013/09/26 面试题
介绍一下linux的文件权限
2014/07/20 面试题
十佳班主任事迹材料
2014/01/18 职场文书
《一株紫丁香》教学反思
2014/02/19 职场文书
蛋糕店创业计划书
2014/05/06 职场文书
求职信范文大全
2014/05/26 职场文书
美食节策划方案
2014/05/26 职场文书
高中校园广播稿3篇
2014/09/29 职场文书
婚庆主持词大全
2015/06/30 职场文书
导游词之麻姑仙境
2019/11/18 职场文书
试用1103暨1103、1101同门大比武 [ DAIWEI ]
2022/04/05 无线电