Vue中如何正确设置和使用轮询器？

本文共计284个文字，预计阅读时间需要2分钟。

核心代码：`template div { log:0, timerId:1, // 模拟计时器id，唯一性 timerObj: {}, // 计时器存储器 }`

`export default { name: TrainingInRotation, data() { return { log: 0, timerId: 1, // 模拟计时器id，唯一性 timerObj: {}, // 计时器存储器 } }, created() { this.startTraining } }`

核心代码：

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

效果图：

总结

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