Home » Php » javascript – how to set timeout in a vueJs method

javascript – how to set timeout in a vueJs method

Posted by: admin April 23, 2020 Leave a comment

Questions:

how I can use settimeout() function in a vuejs method?

I have already tried something like this, but it doesn’t work

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

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

I get this Error message : Uncaught TypeError: this.fetchHole is not a function

How to&Answers:

Try this: setTimeout(this.fetchHole, 1000) because this in anonymous function is attached to that anonymous function not to your main function

Answer:

Add a bind() call to your function declaration:

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

so that your Vue component’s this is accessible within the function.

Side note: @nospor’s accepted answer is cleaner in this particular situation. The bind approach is a bit more generalized – very useful if you want to do an anonymous function, for example.

Answer:

The classic issue with contextual this in JavaScript.

The following part of code shows an easy solution – if you are using ES6 with Vuejs (default config with vuecli y babel). Use an arrow function

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

An arrow function does not have its own this. The this value of
the enclosing lexical scope is used;

Arrow functions – JavaScript | MDN

Answer:

I think this works too.

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

Answer:

Call recursive with TimeOut:

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

Answer:

You can try :

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