Vue定时器setInterval的使用和清除

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue定时器setInterval的使用和清除相关的知识,希望对你有一定的参考价值。

参考技术A

Vue定时器setInterval的使用和清除

1、data中定义定时器

2、使用定时器1 * 1000代表1s,1 60 1000==minute

3、清除定时器,防止循环引用

Vue中在组件销毁时清除定时器(setInterval)

在mounted中创建并执行定时器,然后在beforeDestroy或者destroyed中清除定时器

<template>
      <div class="about">
      </div>
    </template>
    <script>
    export default {
        name: "about",
        data() {
            return {
                //接收定时器
                timer: ""
            };
        },
        mounted() {
            let _this = this;
            let num = 0;
            //创建并执行定时器
            this.timer = setInterval(() => {
              //当num等于100时清除定时器
                if (num == 100) {
                    clearInterval(_this.timer);
                }
                console.log(num++);
            }, 1000);
        },
        beforeDestroy() {
            //清除定时器
            clearInterval(this.timer);
            console.log("beforeDestroy");
        },
        destroyed() {
            //清除定时器
            //clearInterval(this.timer);
            console.log("destroyed");
        }
    };
    </script>
    <style scoped>
    </style>

以上是关于Vue定时器setInterval的使用和清除的主要内容,如果未能解决你的问题,请参考以下文章

Vue中在组件销毁时清除定时器(setInterval)

vue中使用setInterval()循环定时器的注意事项

vue中使用定时器

VUE定时任务 及 清除定时任务

Vue2 里如何优雅的清除一个定时器

javascript怎么清除所有的定时器setInterval