如何在vue中使用轮训器

这篇文章给大家介绍如何在vue中使用轮训器，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

成都创新互联长期为1000多家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为皮山企业提供专业的成都做网站、成都网站制作，皮山网站改版等技术服务。拥有10多年丰富建站经验和众多成功案例,为您定制开发。

核心代码：

<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

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。

关于如何在vue中使用轮训器就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

网站题目：如何在vue中使用轮训器
新闻来源：https://www.cdcxhl.com/article32/pdsssc.html

成都网站建设公司_创新互联，为您提供响应式网站、云服务器、网站策划、营销型网站建设、Google、动态网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联