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

Question

我说我最近和vue.js一起工作，我不明白为什么会发生这种情况，使用setTimeout（）。使用以下代码，无论时间＆＃39;的值如何，都会立即启动setInterval（function（），time）中定义的函数：

timerOn(){

  ...

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

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

但是如果我使用下面的代码一切正常，那么setInterval中的函数会在＆＃39; time＆＃39;之后发生。定义：

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()的结果传递给setTimeout。