如何在 vueJs 方法中设置超时答案

【问题标题】：how to set timeout in a vueJs method如何在 vueJs 方法中设置超时
【发布时间】：2016-09-24 17:16:22
【问题描述】：

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

【问题讨论】：

试试这个：setTimeout(this.fetchHole, 1000)
非常感谢@nospor
我将我的评论作为答案推送，因此您现在可以将您的问题标记为已解决
How do I ensure that Javascript's "this" will refer to the object when using setTimeout?的可能重复

标签： javascript php jquery laravel-5 vue.js

【解决方案1】：

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

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

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

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

Arrow functions - JavaScript | MDN

【讨论】：

这个就是你的做法

【解决方案2】：

你可以试试：

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

【讨论】：

【解决方案3】：

使用 TimeOut 递归调用：

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

【讨论】：

【解决方案4】：

我认为这也有效。

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

【讨论】：

【解决方案5】：

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

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

这样你的 Vue 组件的 this 就可以在函数中访问。

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

【讨论】：

这个答案更完整，因为它允许多行函数，而无需在组件方法中定义另一个函数

【解决方案6】：

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

【讨论】：