Npcink Blog
切换菜单

setTimeout 定时执行一个函数 - Vue3

通过 JavaScript 的 setTimeout 创建定时执行指定函数

最后更新于
本页目录1 节

我们做了个单击按钮，单击就有弹窗。然后通过 setTimeout()延时执行

我们再在 mounted()钩子中添加一个 setTimeout()函数

//定时执行，自动打开按钮
this.timer = setTimeout(this.openWeapp, 1000);

完整代码如下：

<!DOCTYPE html>
<html lang="zh-CN">


<head>
    <meta charset="UTF-8">
    <title>定时执行函数 - Vue3</title>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>


<body>
    <div id="myphp">
        <p>单击按钮打开新链接</p>
        <button @click="openWeapp()">点击会有弹出框哦</button>


    </div>
    <script>
        const App = Vue.createApp({
            methods: {
                openWeapp() {
                    alert("弹弹弹，弹走鱼尾纹")
                }
            },
            mounted() {
                //定时执行，自动打开按钮
                setTimeout(this.openWeapp, 1000);
            }
        })
        App.mount("#myphp")
    </script>
</body>


</html>

实际执行效果如下：

原网页中的可执行演示已停用，以下完整保留为静态 HTML 代码。

<!DOCTYPE html>
<html lang="zh-CN">


<head>
    <meta charset="UTF-8">
    <title>定时执行函数 - Vue3</title>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>


<body>
    <div id="myphp">
        <p>单击按钮打开新链接</p>
        <button @click="openWeapp()">点击会有弹出框哦</button>


    </div>
    <script>
        const App = Vue.createApp({
            methods: {
                openWeapp() {
                    alert("弹弹弹，弹走鱼尾纹")
                }
            },
            mounted() {
                //定时执行，自动打开按钮
                setTimeout(this.openWeapp, 1000);
            }
        })
        App.mount("#myphp")
    </script>
</body>


</html>

参考文档

JavaScript 计时事件