vue大屏开发系列—使用定时器setInterval和setTimeout

1.setInterval循环执行定时器

循环执行就是设置一个时间间隔，每过一段时间都会循环执行这个方法,直到这个定时器被销毁掉；

页面触发

mounted() {this.getConsole()/*最初始情况，项目刚打开的时候，这个时候页面是必定没有定时器的，那么逻辑就会走else，这个时候就会注册一个定时器去循环调用相应逻辑代码后续有三种情况情况一：路由跳转，跳走了，就要清除这个定时器，所以在beforeDestroy钩子中要清除定时器情况二：关闭项目，关闭项目了以后，系统就会自动停掉定时器，这个不用管它情况三：刷新页面，这个时候vue组件的钩子是不会执行beforeDestroy和destroyed钩子的，所以需要加上if判断一下，若还有定时器的话，就清除掉，所以这个就是mounted钩子的if判断的原因*/if (this.timer) {clearInterval(this.timer);} else {this.timer = setInterval(this.getConsole, 1000);}},methods: {getConsole() {console.log("定时器");},},beforeDestroy() {if(this.timer){clearInterval(this.timer);this.timer = null;}},

2. setTimeout定时执行

定时执行 setTimeout 是设置一个时间，等待时间到达的时候只执行一次，但是执行完以后定时器还在，只是不再运行；

如下：等待2000毫秒后执行looper函数一次。

<script>export default {data() {return {timer: '',value: 0};},methods: {loop() {this.value ++;console.log(this.value);}},mounted() {this.timer = setTimeout(this.loop, 2000);},beforeDestroy() {if(this.timer){clearInterval(this.timer);this.timer = null;}}};
</script>

vue大屏开发系列—使用定时器setInterval和setTimeout相关推荐

润乾报表列太多导致渲染速度慢_报表自动化: 如何选择可视化大屏开发利器
报表自动化: 如何选择可视化大屏开发利器www.coologic.cn 我们在前文完成了各种数据的准备:原始数据.指标数据.报表表格等等,但仍然无法解决"阅者"难以理解庞大数据. ...
vue大屏展示高度自适应
vue大屏展示获取当前屏幕盖度 <template><div ref="bigshow"></div> &l ...
vue 大屏数字上下滚动
vue 大屏数字上下滚动效果就是有数字变动时,会有一个动画跳到相应的数字,是上下滚动的那种. <div class="chartNum"><div class= ...
echars大屏开发案例
在大屏开发项目中DataV我觉得是不可缺少的东西,我建议UI在设计大屏的时候时候首先先看echars 在结合DataV来设计,请不要天马行空的去设计,有的UI真的很菜,天马行空真的. 废话不多说,我也 ...
Vue大屏可视化DataV组件库
前言最近需要做一个 Vue大屏数据可视化的项目,找资料的时候发现一个很棒的 vue大屏数据可视化插件DataV组件库,可使我们大屏看起来更高端. DataV介绍网站链接:http://datav. ...
前端定时器 setInterval 和 setTimeout
前端定时器 setInterval 和 setTimeout 1.setInterval 循环执行设置循环执行销毁定时器 2.setTimeout 定时执行设置定时执行 3. setTimeou ...
基于vue的可视化大屏开发
简介业界解决方案百度的 sugar 可视化解决方案 https://sugar.baidu.com/home 阿里datav https://data.aliyun.com/visual/data ...
VUE大屏可视化实战
前言框架:若依 VUE+SpringBoot前后端分离基于此框架开发一个可视化自适应大屏(包括echarts和element的各种组件) 1.布局通过div将大的布局框出来,div一定要由大到小 ...
用Vue大屏可视化，数据可视化平台酷屏优胜它
大屏可视化,老司机提到vue大家肯定不陌生,什么是Vue呢?Vue 是一套用于构建用户界面的渐进式JavaScript框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心 ...

vue大屏开发系列—使用定时器setInterval和setTimeout

页面触发

vue大屏开发系列—使用定时器setInterval和setTimeout相关推荐

最新文章

热门文章