vue中轮训器的使用

时间:2021-05-26

核心代码:

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

效果图:

总结

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

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章