Question

我试图通过在Vue对象方法中使用setInterval来调用函数，但是它不起作用。

我使用点击事件来调用login()方法

<!--login.vue-->
<div ref="login_btn" class="login-btn btn" :style="btnLoadingSyle" 
@click="!isBtnLoading && login()">
     {{isBtnLoading ? 'Logining...' : 'Login'}}
</div>

然后在login()中尝试这样做

//login.vue
login: function(event) {
            var that = this;

            if (this.checkInput()) {
                console.log(this.username + ' ' + this.password);
            } else {
                return;
            }

            this.isBtnLoading = true;
            this.btnLoadingSyle = {
                'background-color': "#515151",
                'color': "#ffffff"
            }

            var buf = Buffer.from(`${this.username} ${this.password}`);
            var count = 0;

            console.log("begin");
            this.timer = setInterval(() => {
                console.log("interval");
            }, 1000);
        },

然后我将该Vue模板安装到index.html中的div

//index.html
<script>
...
const login = new Vue(Login).$mount('#login');
...
</script>

然后我使用npm start启动我的电子应用程序，但是当我输入用户名和密码并单击时，setInterval()完全不起作用。

在开发者控制台中，我尝试读取login.timer，这就是结果

> console.log(login.timer)
  VM257:1 null
< undefined
  login.vue:185 user 12345
  login.vue:199 begin
> console.log(login.timer)
  VM260:1 Timeout {…}
< undefined

可以看出，在我单击div之前，我无法读取timer，但是单击后，timer从setInterval和login()中获取值看起来效果不错，但我每秒都看不到任何输出。

setInerval在index.html中正常工作

我对这个问题感到非常困惑，并期待获得一些想法。

谢谢。

编辑

最后我发现原因可能是范围

我只是移动

import { setInterval, clearInterval, setTimeout } from "timers";

从login.vue到index.html
而且有效。

谢谢大家。

setInterval函数在Vue模板中不起作用

0 个答案: