一页上同一JavaScript类的两个实例请参阅同一实例

Question

我正在尝试编写一个倒数计时器脚本，并且在页面上仅适用于一个实例，但是如果我添加第二个实例，则只有第二个开始计数。

我发现，如果我两者都加载，但是只会呼叫第二个开始，第一个发射。看来它们没有正确范围。

我正在使用新的类语法，所以我认为它应该按原样工作，但是我显然缺少一些东西。我希望有人可以帮助我理解我在做错了什么。我的主要语言是PHP，我的精通在JS中的精通。

这是我要点的链接，其中包含代码：https：//gist.github.com/kennyray/b35f4c6640be9539c5d16581de7714e0

class CountdownTimer {
	constructor(minutesLabel = null, secondsLabel = null) {
		self = this;
		this.minutesLabel = minutesLabel;
		this.secondsLabel = secondsLabel;
		this.totalSeconds = (this.minutesLabel.textContent / 60) + this.secondsLabel.textContent;
		this.timer = null;
	}
	
	set minutesLabel(value) {
		self._minutesLabel = value;
	}
	
	set secondsLabel(value) {
		self._secondsLabel = value;
	}
	
	get minutesLabel() {
		return self._minutesLabel;
	}
	
	get secondsLabel() {
		return self._secondsLabel;
	}
	
	
    setTime() { 
      self.totalSeconds--;
	  if (parseInt(self.minutesLabel.innerHTML) == 0 && parseInt(self.secondsLabel.innerHTML) == 0) { self.stopTimer; return;}
	  
	  if (self.secondsLabel.innerHTML.textContent < 0) { self.secondsLabel.innerHTML = 59 }
	  if (self.minutesLabel.innerHTML.textContent < 0) { self.minutesLabel.innerHTML = 59 }
	  self.secondsLabel.innerHTML = self.pad((self.totalSeconds % 60));
      self.minutesLabel.innerHTML = self.pad(Math.floor(self.totalSeconds / 60));
	  
    } 
    
	pad(val) {
    		var valString = val + "";
        if (valString.length < 2) {
            return "0" + valString;
		} else {
            return valString;
        } 
    }
    
    resetTimer() {
        clearInterval(self.timer);
        self.totalSeconds = 0;
        self.secondsLabel.innerHTML = self.pad(self.totalSeconds % 60);
        self.minutesLabel.innerHTML = self.pad(parseInt(self.totalSeconds / 60));   
    }
    
    startTimer() {
    	self.timer = setInterval(self.setTime, 1000);
    }
	
	stopTimer() {
    	clearInterval(self.timer);
    }
}
const t1 = new CountdownTimer(document.getElementById("minutes1"), document.getElementById("seconds1"));
t1.startTimer();
const t2 = new CountdownTimer(document.getElementById("minutes"), document.getElementById("seconds"));
console.log(t1.startTimer() === t2.startTimer());
t2.startTimer();

<label id="minutes1">01</label>:<label id="seconds1">10</label>
<br>
<label id="minutes">00</label>:<label id="seconds">10</label>

Answer 1

您正在声明一个全局变量self(为什么要这样做？只需在类中使用this。

然后，您的StartTimer功能需要为

 startTimer() {
    this.timer = setInterval(this.setTime.bind(this), 1000);
  }

并且应该检查是否已经有间隔并清除this.timer

startTimer() {
    if (this.timer) this.stopTimer();
    this.timer = setInterval(this.setTime.bind(this), 1000);
}
stopTimer() {
    clearInterval(this.timer);
    this.timer = null;
}

Answer 2

它确实归结为这一行

self = this;

不包括关键字var，您将其提升到全局范围。如果您想在CTOR中使用self而不是this(这很好(只需将其与var前缀：

var self = this;