vue中轮训器的使用

最新推荐文章于 2024-11-06 14:16:04 发布

郭宝

最新推荐文章于 2024-11-06 14:16:04 发布

阅读量693

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端

本文链接：https://blog.youkuaiyun.com/qq_35366269/article/details/86613529

Web前端专栏收录该内容

284 篇文章 ¥99.90 ¥299.90

订阅专栏

超级会员免费看

本文介绍了在Vue.js中如何创建一个轮训器组件，通过核心代码展示如何定期更新数据，实现动态效果。同时，提供了实际运行的效果图，帮助读者更好地理解和应用。

核心代码：

<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();

        },

        /