vue中轮训器的使用

 更新时间:2019年01月27日 11:27:02   作者:Moment°回忆  
今天小编就为大家分享一篇关于vue中轮训器的使用,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧

核心代码:

<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 出现data-v-xxx的原因及解决

    vue 出现data-v-xxx的原因及解决

    这篇文章主要介绍了vue 出现data-v-xxx的原因及解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • VueJs与ReactJS和AngularJS的异同点

    VueJs与ReactJS和AngularJS的异同点

    这篇文章主要为大家详细介绍了VueJs与ReactJS和AngularJS的异同点,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • 基于Vue.js的表格分页组件

    基于Vue.js的表格分页组件

    这篇文章主要为大家详细介绍了基于Vue.js的表格分页组件使用方法,了解了Vue.js的特点,感兴趣的朋友可以参考一下
    2016-05-05
  • Element table 上下移需求的实现

    Element table 上下移需求的实现

    本文主要介绍了Element table 上下移需求的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • Vue封装组件并上传到npm的教程详解

    Vue封装组件并上传到npm的教程详解

    这篇文章主要为大家详细介绍了Vue封装组件并上传到npm的相关教程,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考下
    2024-04-04
  • 又一款MVVM组件 构建自己的Vue组件(2)

    又一款MVVM组件 构建自己的Vue组件(2)

    这篇文章主要为大家分享了一款MVVM组件,构建自己的Vue组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 通用vue组件化展示列表数据实例详解

    通用vue组件化展示列表数据实例详解

    组件化开发能大幅提高应用的开发效率、测试性、复用性等,下面这篇文章主要给大家介绍了关于通用vue组件化展示列表数据的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • vue-cli 引入jQuery,Bootstrap,popper的方法

    vue-cli 引入jQuery,Bootstrap,popper的方法

    这篇文章主要介绍了vue-cli 引入jQuery,Bootstrap,popper的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • vue-router项目实战总结篇

    vue-router项目实战总结篇

    vue-router 是 Vue.js 官方的路由库.这篇文章主要介绍了vue-router项目实战总结,需要的朋友可以参考下
    2018-02-02
  • 详解Vue学习笔记进阶篇之列表过渡及其他

    详解Vue学习笔记进阶篇之列表过渡及其他

    本篇文章主要介绍了详解Vue学习笔记进阶篇之列表过渡及其他,具有一定的参考价值,有兴趣的可以了解一下
    2017-07-07

最新评论