vue 定时器:setInterval和setTimeout使用实例及区别

简介: vue 定时器:setInterval和setTimeout使用实例及区别

js中定时器有两种,一个是循环执行setInterval,另一个是定时执行setTimeout

  • 循环执行(setInterval)

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

用法是setInterval(“方法名或方法”,“延时”), 第一个参数为方法名或者方法,注意为方法名的时候不要加括号,第二个参数为时间间隔

实例:配合dayjs实现钟表功能,显示实时时间

<template>
  <div id="app">
    {{this.datetime}}
  </div>
</template>
<script>
  export default {
    name: "app",
    data() {
      return {
        timer: '',
        datetime: ''
      }
    },
    mounted() {
      /* 每秒定时刷新 */
      this.timer = setInterval(() => {
        this.datetime = this.dayjs().format("YYYY-MM-DD HH:mm:ss")
        console.log(this.datetime)
      }, 1000)
    },
    beforeDestroy() {
      /* 离开页面前销毁定时器 */
      if(this.timer){
        clearInterval(this.timer);
      }
    }
  };
</script>
<style lang="less" scoped>
</style>

vue 使用dayjs:https://blog.csdn.net/weixin_42201180/article/details/107832001

  • 定时执行 (setTimeout)

定时执行setTimeout是设置一个时间,等待时间到达的时候只执行一次,但是执行完以后定时器还在,只是没有运行

用法是setTimeout(“方法名或方法”, “延时”); 第一个参数为方法名或者方法,注意为方法名的时候不要加括号,第二个参数为时间间隔

实例:解决初始化页面echarts渲染出错问题

<template>
  <div id="app">
    延时渲染chart
  </div>
</template>
<script>
  export default {
    name: "app",
    data() {
      return {
        timer: '',
      }
    },
    mounted() {
      /* 延时渲染chart */
      this.timer = setTimeout(() => {
        this.initEchart()
      }, 0)
    },
    methods: {
      initEchart(){
        // 此处chart代码省略
        ...
      }
    },
    beforeDestroy() {
      /* 离开页面前销毁定时器 */
      if (this.timer) {
        clearTimeout(this.timer);
      }
    }
  };
</script>
<style lang="less" scoped>
</style>

vue使用echarts见:vue 引入echarts及实例

相关文章
|
1天前
|
JavaScript 测试技术
vue不同环境打包环境变量处理
vue不同环境打包环境变量处理
11 0
|
1天前
|
JavaScript
vue中高精度小数问题(加减乘除方法封装)处理
vue中高精度小数问题(加减乘除方法封装)处理
6 0
|
1天前
|
JavaScript
vue项目使用可选链操作符编译报错问题
vue项目使用可选链操作符编译报错问题
5 0
|
1天前
|
JavaScript
Vue项目启动报错处理
Vue项目启动报错处理
6 1
|
JavaScript
vue 踩坑 01 ->两种创建vue实例的区别
第一个例子 {{msg}} var app = new Vue({ el: '#app', data: { m...
919 0
|
6天前
|
JavaScript 算法 Linux
【vue报错】error:0308010C:digital envelope routines::unsupported
【vue报错】error:0308010C:digital envelope routines::unsupported
32 3
|
1天前
|
JavaScript 定位技术
vue项目开发笔记记录(二)
vue项目开发笔记记录
16 0
|
1天前
|
JSON JavaScript API
vue项目开发笔记记录(一)
vue项目开发笔记记录
16 0
|
1天前
|
JavaScript
Vue-实现点击空白处隐藏某节点
Vue-实现点击空白处隐藏某节点
9 1
|
1天前
|
缓存 JavaScript 前端开发
vue项目实战:实战技巧总结(中)
vue项目实战:实战技巧总结
12 1