如何在一个独立运行的页面上创建多个计时器-javascript？ [英] How do you create multiple timers on one page that operate independently -- javascript?

问题描述

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

I wrote a timer object that works like a stop watch (click once and the timer starts, click again and it stops, double click and it resets). Everything works fine if I only activate one timer. When I activate a second timer, the first one stops working. When I activate a third timer, the second stops working.

我动态创建了每个计时器对象，为每个计时器提供了自己的名称（window [timer1]）。但他们不是独立行事。为了使计时器对象彼此独立运行，我缺少什么？

I dynamically created each timer object to give each timer it's own name (window[timer1]). But they are not acting independently. What am I missing to make the timer objects operate independently of each other?

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;
}

推荐答案

您有一些范围问题。例如，

You have some scope issues. E.g.

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;
}

这将声明分钟，元素和 t ，因此每次调用 startClock 将覆盖这些值。

This will declare minute, element and t in global scope, thus every call to startClock will overwrite these values.

以下是重构版本：

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中的对象 。

Read more about Objects in JavaScript.

这篇关于如何在一个独立运行的页面上创建多个计时器-javascript？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！