Два экземпляра одного класса JavaScript на одной странице ссылаются на один и тот же экземпляр - PullRequest
Новая
       5

Два экземпляра одного класса JavaScript на одной странице ссылаются на один и тот же экземпляр

0 голосов
/ 24 мая 2019

Я пытаюсь написать скрипт таймера обратного отсчета, и он работает только с одним экземпляром на странице, но если я добавлю второй, только второй начнет отсчет.

Я обнаружил, что если я загружаю оба, но только вызываю старт для второго, первый срабатывает.Похоже, что они не правильно определены.

Я использую новый синтаксис класса, поэтому я подумал, что он должен работать как есть, но я явно что-то упускаю.Я надеюсь, что кто-то может помочь мне понять, что я делаю неправильно.Мой основной язык - 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>

Ответы [ 2 ]

2 голосов
/ 24 мая 2019

Это действительно сводится к этой строке 

self = this;

Не включая ключевое слово var, вы повышаете его до глобальной области. Если вы хотите использовать self вместо this в ctor (что совершенно нормально), просто добавьте к нему префикс var: 

var self = this;
2 голосов
/ 24 мая 2019

Вы объявляете глобальную переменную 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;
}
...