vue.js中如何使用定时器?

vue.js中如何使用定时器?下面本篇文章给大家介绍一下Vue中使用定时器setInterval和setTimeout。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

Vue中使用定时器setInterval和setTimeout

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

一、循环执行(setInterval)

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

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

<template>
  <section>
    <h1>hello world~</h1>
  </section>
</template>
<script>
  export default {
    data() {
      return {
        timer: '',
        value: 0
      };
    },
    methods: {
      get() {
        this.value ++;
        console.log(this.value);
      }
    },
    mounted() {
      this.timer = setInterval(this.get, 1000);
    },
    beforeDestroy() {
      clearInterval(this.timer);
    }
  };
</script>

上面的例子就是页面初始化的时候创建了一个定时器setInterval,时间间隔为1秒,每一秒都会调用一次函数get,从而使value的值加一。

二、定时执行 (setTimeout)

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

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

<template>
  <section>
    <h1>hello world~</h1>
  </section>
</template>
<script>
  export default {
    data() {
      return {
        timer: '',
        value: 0
      };
    },
    methods: {
      get() {
        this.value ++;
        console.log(this.value);
      }
    },
    mounted() {
      this.timer = setTimeout(this.get, 1000);
    },
    beforeDestroy() {
      clearTimeout(this.timer);
    }
  };
</script>


上面是页面初始化时候创建一个定时器setTimeout,只在1秒后执行一次方法。

定时器需要在页面销毁的时候清除掉,不然会一直存在!!!

嗯,就酱~~

更多web前端知识,请查阅 HTML中文网 !!

以上就是vue.js中如何使用定时器?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读

    如何使用计算机加速引导盘

    如何使用计算机加速引导盘,,点评:随着磁盘读写速度的大大提高,U的作用越来越大,比如磁盘加载系统,用U盘维护系统等等。今天我给大家带来的是如

    2010年底DIY硬件总结和安装参考

    2010年底DIY硬件总结和安装参考,,它似乎只是一眨眼的功夫从过去的最后一眼。看看现在的岗位似乎就在昨天,但看看当年的内容是真的走了,如果

    如何使用笔记本wifi

    如何使用笔记本wifi,,无线上网笔记本分为两种,一个是连接无线局域网的无线网络卡的使用近(WLAN、WI-FI),一种是使用USB调制解调器实现3G无线网

    保存硬盘上的数据,谁更有价值

    保存硬盘上的数据,谁更有价值,,常用的数据存储方式有两种:硬盘和光盘。用户或多或少对自己说,好的有很多人。争了,不知道你是否有账户的账号,两

    雷蛇设置宏|雷蛇设置宏循环

    雷蛇设置宏|雷蛇设置宏循环,,雷蛇设置宏循环使用雷蛇软件设置宏驱动的方法如下:1、今天小编就以雷蛇鼠标为例,介绍宏定义的使用。当刚买的鼠

    惠普笔记本如何使用惠普笔记本

    惠普笔记本如何使用惠普笔记本,,惠普笔记本相信每个人都不会陌生,在PC行业是全球知名企业之一。有很多朋友围绕惠普品牌笔记本使用,今天有网