web-dev-qa-db-ja.com

vueJsメソッドでタイムアウトを設定する方法

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

javascriptphpjquerylaravel-5vue.js
25
user3757488

これを試してください：setTimeout(this.fetchHole, 1000)は、匿名関数のthisがメイン関数ではなく、その匿名関数に関連付けられているためです。

31
nospor

bind()呼び出しを関数宣言に追加します。

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

Vueコンポーネントのthisが関数内でアクセス可能になるように。

サイドノート：@nosporの受け入れられた答えは、この特定の状況ではよりクリーンです。 bindアプローチはもう少し一般化されています-たとえば、匿名関数を実行したい場合に非常に便利です。

38
ceejayoz

JavaScriptのコンテキストthisの古典的な問題。

コードの次の部分は簡単な解決策を示しています-VuejsでES6を使用している場合（vuecli y babelのデフォルト設定）。矢印機能を使用する

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

矢印関数には、独自のthisがありません。囲むレキシカルスコープのthis値が使用されます。

矢印関数-JavaScript | MDN

28
Deiviz

これも機能すると思います。

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

TimeOutを使用した再帰呼び出し：

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