首页 > 编程 > JavaScript > 正文

vue中轮训器的使用

2019-11-19 12:13:14
字体:
来源:转载
供稿:网友

核心代码:

<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>

效果图:

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对武林网的支持。如果你想了解更多相关内容请查看下面相关链接

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表