如何在vueJs方法中设置超时

Question

如何在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

Answer 1

在函数声明中添加bind()调用：

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

以便在函数中访问您的Vue组件this。

^{旁注：在这种特殊情况下，@ nospor接受的答案更清晰。 bind方法有点概括 - 例如，如果你想做一个匿名函数，它非常有用。}

Answer 2

试试这个：setTimeout(this.fetchHole, 1000)因为匿名函数中的this附加到该匿名函数而不是主函数

Answer 3

JavaScript中的上下文this的经典问题。

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

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

Answer 4

我认为这也有效。

var self = this;
setTimeout(function () { self.fetchHole() } , 1000)

Answer 5

使用TimeOut调用递归：

1782

Answer 6

尚未将this绑定到setTimeout函数的方法。

setTimeout(() => { this.fetchHole() },1000)(this)

Answer 7

您可以尝试：

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