计时器不希望停止.prototype.stop

时间:2018-01-06 21:51:12

标签: javascript timer prototype

为什么计时器clock.start();不想使用函数clock.stop();停止。

我在原型clearInterval中使用典型函数stop来停止函数start。在调用clock.stop();后,函数clock.start();中的计时器不会停止。

我无法理解为什么......

function Clock(options) {
  this._template = options.template;
}

Clock.prototype._render = function() {
  var date = new Date();

  var hours = date.getHours();
  if (hours < 10) hours = '0' + hours;

  var min = date.getMinutes();
  if (min < 10) min = '0' + min;

  var sec = date.getSeconds();
  if (sec < 10) sec = '0' + sec;

  var output = this._template.replace('h', hours).replace('m', min).replace('s', sec);

  console.log(output);
};

Clock.prototype.start = function() {
  this._render();
  var self = this;
  this._timer = setInterval(function() {
    self._render();
  }, 1000);
};

Clock.prototype.stop = function() {
  setTimeout(function() {
    clearInterval(this._timer);
    console.log('Stop!'); // message is displayed, but timer in **this._timer** does not stop...
  }, 5000);
};

var clock = new Clock({
      template: 'h:m:s'
    });
clock.start();
clock.stop();

1 个答案:

答案 0 :(得分:0)

要解决函数clock.stop();中的问题,必须应用类似地应用于函数clock.start()的闭包;

所以我们需要将this._timer放在局部变量中,并使用clouser方法直接访问它们。

Clock.prototype.start我们做过clouser

  this._render();
  var self = this;

所以我们需要在Clock.prototype.stop这样的

中做同样的事情
var sef = this._timer;

并在计时器功能中使用局部变量sef。

这么简单,但我现在才明白。

感谢@elclanrs瞄准:)