Question

我正在尝试编写一个Countdown计时器脚本，它仅与页面上的一个实例一起使用，但是如果我添加第二个实例，则只有第二个实例开始计数。

我发现，如果同时加载两个，但仅调用第二个的开始，则第一个将触发。看来它们的作用域不正确。

我正在使用新的类语法，因此我认为它应该可以正常工作，但是我显然遗漏了一些东西。我希望有人可以帮助我了解我在做什么错。我的主要语言是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;

一页上具有相同javascript类的两个实例引用相同的实例

2 个答案: