1、定时执行 (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() {
      //一秒后执行一次get方法,打印1
      this.timer = setTimeout(this.get, 1000);
    },

    //销毁定时器,不然会一直存在
    beforeDestroy() {
      clearTimeout(this.timer);
    }
  };
</script>

2、循环执行(setInterval)

 在一定的时间内一直无限循环执行,直到销毁,用法和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() {
      //每隔一秒钟就不断的运行get函数,打印1,2,3,4,5,......
      this.timer = setInterval(this.get, 1000);
    },
    //销毁定时器
    beforeDestroy() {
      clearInterval(this.timer);
    }
  };
</script>

3、定时器的传参问题

传统的方式是不能给定时器传递参数的,比如:

setInterval(this.get(1,2), 1000); //这样并不能将参数(1,2)传递给定时器使用

如要传递参数,下面只介绍一种简单的方法,即直接将方法定义在mounted()中:

<template>
  <section>
    <h1>{{totle}}</h1>
  </section>
</template>
<script>
  export default {
    data() {
      return {
        timer: '',
        value: 1,
        totle:0,
      };
    },
    methods: {
    },
    mounted() {
      //每隔一秒钟就不断的运行add函数,不断打印1+2+3+......的值
      this.timer = window.setInterval(function () {
        add(0, this.value);
      }, 1000);

      function add(num,value){
        this.totle = num + value;
        this.value = this.value+1;
    },
    //销毁定时器
    beforeDestroy() {
      clearInterval(this.timer);
    }
  };
</script>

更多方法参考:setInterval(code, time)中code传递参数办法 - Young Dreamer - 博客园

Logo

前往低代码交流专区

更多推荐