今天小编就为大家分享一篇关于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>
效果图：
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对脚本之家的支持。如果你想了解更多相关内容请查看下面相关链接
您可能感兴趣的文章: