为什么 vue.js 中的 setTimeout 有这种奇怪的行为？

Question

我最近声明要使用 vue.js，但我不明白为什么会使用 setTimeout() 发生这种行为。使用以下代码，无论 'time' 的值如何，setInterval(function(), time) 中定义的函数都会立即启动：

timerOn(){

  ...

  this.avatar.timer.data = setTimeout( this.timerFunction(), 10000);
},
timerFunction(){
  ...

  console.log('Hello!!');
  clearTimeout(this.avatar.timer.data);
  this.timerOn();
},

但如果我使用以下代码，一切正常，并且 setInterval 内的函数在定义的“时间”之后发生：

timerOn(){

  ...

  var This = this;
  this.avatar.timer.data = setTimeout(function() { This.timerFunction()}, 10000);
},
timerFunction(){
  ...

  console.log('Hello!!');
  clearTimeout(this.avatar.timer.data);
  this.timerOn();
},

有人可以指导我并说为什么第一种方法失败了？

谢谢。

Answer 1

这会timerFunction立即执行并将结果作为回调传递给setTimeout.

setTimeout( this.timerFunction(), 10000)

但是，您想要传递回调setTimeout并且timerFunction不返回函数。我希望你想要的是

setTimeout( this.timerFunction, 10000)

这会将函数的引用传递timerFunction给setTimeout。第一个示例将结果传递给timerFunction()to setTimeout。