Question

我想制作一个从某个初始数字倒计时的计时器，并在它变为零时停止。

我最初使用setInterval执行此操作，但我想将计时器（setInterval）与倒计时功能分开，并且发现很难终止setInterval。

我目前正在尝试使用setTimeout实现相同的功能，它有条件地再次调用相同的setTimeout，但它不起作用。

＆＃13;

function Timer(initialTime) {
  this.time = initialTime;
  this.tickTock = null
}

Timer.prototype.countDown = function() {
  if (this.time <= 0) {
    clearTimeout(this.tickTock);
  } else {
    console.log(this.time);
    this.time--;
    this.proceed();
  }
}

Timer.prototype.proceed = function() {
  this.tickTock = setTimeout(this.countDown, 3000);
}

var timer = new Timer(10);
timer.proceed();

＆＃13;

致电timer.proceed()时，我收到错误：

TypeError：this.proceed不是函数

在Timer.countDown [as _onTimeout]

如何从countDown函数中引用proceed函数？

Answer 1

setTimeout的回调未绑定到您的对象，但它绑定到window，因此this是window对象而不是您的timer对象。您可以使用Function.prototype.bind绑定回调，如下所示：

this.tickTock = setTimeout(this.countDown.bind(this), 3000);

注意：使用setTimeout时不需要this.tickTock，您可以通过不调用另一个proceed来停止倒计时。你可以保留它但是没用。（参见下面的代码片段。）

工作代码段

function Timer(initialTime) {
  this.time = initialTime;
}

Timer.prototype.countDown = function() {
  if (this.time <= 0) { // if the counter is less or equal 0, return and don't call proceed
    return;
  }
  // otherwise continue
  console.log(this.time);
  this.time--;
  this.proceed();  
}

Timer.prototype.proceed = function() {
  setTimeout(this.countDown.bind(this), 1000);
}

var timer = new Timer(10);
timer.proceed();

递归setTimeout - 不是变量

1 个答案: