如何在vueJs方法中设置超时

用户名 · 03月12日

如何在vuejs方法中使用settimeout()函数?

我已经尝试过类似的方法,但是没有用

fetchHole: function () { 
    //get data
},

addHole: function () {
    //my query add new
    setTimeout(function () { this.fetchHole() }, 1000)
},

我收到此错误消息: Uncaught TypeError: this.fetchHole is not a function

回答(6)
时间
N
Nospor
6 · 2020-03-12 10:27:27

尝试以下操作:setTimeout(this.fetchHole, 1000)因为this在匿名函数中,该匿名函数是附加到该匿名函数的,而不是附加到您的主要函数

你可以试试 :

addHole:function(){
  let vm = this
  setTimeout(function(){vm.fetchHole()}, 1000)
}

thisJavaScript中上下文相关的经典问题

以下代码部分显示了一种简单的解决方案-如果您将ES6与Vuejs一起使用(带有vuecli y babel的默认配置)。使用箭头功能

setTimeout(()=>{
   this.yourMethod()
},1000);

箭头函数没有自己的this使用this封闭词法范围值;

箭头功能-JavaScript | MDN

我认为这也可行。

var self = this;
setTimeout(function () { self.fetchHole() } , 1000)
塞贾约兹
2 · 2020-03-12 10:27:27

bind()向您的函数声明添加调用:

setTimeout(function () { this.fetchHole() }.bind(this), 1000)

这样您this就可以在函数中访问Vue组件

旁注:在这种特殊情况下,@ nospor可接受的答案更干净。这种bind方法较为通用-例如,如果您想执行匿名功能,则非常有用。

用TimeOut递归调用:

    save: function () {
      this.progressToProced = 0
      this.progress()          
    },
    progress: function () {
      if (this.progressToProced < 100) {
        this.progressToProced++
        setTimeout(function () { this.progress() }.bind(this), 100)
      }
    }

你的回答

加载中...
⌘+Return 发表
发表

温馨提示:登录后可发表评论或回复

关闭,朕知道了

扫码关注微信公众号或小程序