如何在一个独立运行的页面上创建多个计时器-javascript？

Question

我写了一个计时器对象,其作用类似于秒表(单击一次,计时器启动,再次单击并停止,双击并重置).如果我只激活一个计时器,一切正常.当我激活第二个计时器时,第一个计时器停止工作.当我激活第三个计时器时,第二个计时器停止工作.

我动态创建了每个计时器对象,为每个计时器提供了自己的名称(window [timer1]).但他们不是独立行事.我错过了让计时器对象彼此独立运行的原因是什么？

function Clock() {
  this.element = "";
  this.minute = 0;
  this.toggle = true;
  this.active = false;
  this.startClock = startClock;
  this.stopClock = stopClock;

function startClock() {
  minute = this.minute;
  element = this.element;
  minute = checkTime(minute);
  document.getElementById(element).innerHTML = minute;
  minute++;
  this.minute = minute;
  t=setTimeout(function(){startClock()},1000);
  this.counter = t;
}

function checkTime(i) {
    if (i<10)
    {
      i="0" + i;
    }
  return i;
}

function stopClock() {
  document.getElementById(element).innerHTML = this.minute;
  clearTimeout(t);
}

}

function initClock(ele) {
  value = document.getElementById(ele).innerHTML;

  if (typeof window[ele] == 'undefined') {
    window[ele] = new Clock();
    window[ele].element = ele;
  }

  if (value == "start" || window[ele].active == false) {
    window[ele].toggle = true;
  } else {window[ele].toggle = false;}

  if (window[ele].toggle) {
    window[ele].toggle = false;
    window[ele].active = true;
    if (value == "start") {
      window[ele].minute = 0;
    }
    window[ele].startClock();
  }
  else {
    window[ele].toggle = true;
    window[ele].active = false;
    window[ele].stopClock();
  }

}

function clearClock(ele) {
  document.getElementById(ele).innerHTML= "start";
  this.element = "";
  this.minute;
  this.toggle;
  this.counter;
}

Answer 1

你有一些范围问题.例如

function startClock() {
  minute = this.minute;
  element = this.element;
  minute = checkTime(minute);
  document.getElementById(element).innerHTML = minute;
  minute++;
  this.minute = minute;
  t=setTimeout(function(){startClock()},1000);
  this.counter = t;
}

这将声明minute,element并t在全球范围内,因此每次调用startClock将覆盖这些值.

这是一个重构版本:

function Clock(element) {
  this.element = element;
  this.minute = 0;
  this.toggle = true;
  this.active = false;
}

Clock.prototype = {
  startClock: function() {
      this.minute = this.checkTime(this.minute);
      this.element.innerHTML = this.minute;
      this.minute++;
      var that = this;
      this.counter = setTimeout(function(){that.startClock()},1000);
  },

  checkTime = function(i) {
        if (i<10) {
           i="0" + i;
        }
        return i;
  },

  stopClock: function() {
      this.element.innerHTML = this.minute;
      clearTimeout(this.counter);
  },

  clearClock: function() {
      this.element.innerHTML= "start";
      this.element = "";
      this.minute = 0;
      this.toggle = true;
      this.counter = null;
  }
}

function initClock(ele) {
  value = document.getElementById(ele).innerHTML;

  if (typeof window[ele] == 'undefined') {
    window[ele] = new Clock(document.getElementById(ele));
  }

  if (value == "start" || window[ele].active == false) {
    window[ele].toggle = true;
  } else {window[ele].toggle = false;}

  if (window[ele].toggle) {
    window[ele].toggle = false;
    window[ele].active = true;
    if (value == "start") {
      window[ele].minute = 0;
    }
    window[ele].startClock();
  }
  else {
    window[ele].toggle = true;
    window[ele].active = false;
    window[ele].stopClock();
  }

}

阅读更多关于JavaScript中的对象.