vue中轮训器的使用
更新时间:2019年01月27日 11:27:02 作者:Moment°回忆
今天小编就为大家分享一篇关于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>
效果图:
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。如果你想了解更多相关内容请查看下面相关链接
相关文章
Vue上传组件vue Simple Uploader的用法示例
本篇文章主要介绍了Vue上传组件vue Simple Uploader的用法示例,非常具有实用价值,需要的朋友可以参考下2017-08-08vue.js实现的全选与全不选功能示例【基于elementui】
这篇文章主要介绍了vue.js实现的全选与全不选功能,结合实例形式分析了vue.js基于elementui实现全选与全不选功能的相关页面渲染、初始化数据及功能函数等相关操作技巧,需要的朋友可以参考下2018-12-12vue项目中图片选择路径位置static或assets的区别及说明
这篇文章主要介绍了vue项目中图片选择路径位置static或assets的区别及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-09-09
最新评论