Свойство в объекте не определено и clearInterval () не работает - PullRequest
Новая
       20

Свойство в объекте не определено и clearInterval () не работает

1 голос
/ 26 марта 2019

У меня есть этот кусок кода: 

class CombatLog {
constructor(){
    this.idMsg = 0;
    this.timerInterval;
}

startTimer(){
    this.timerInterval = setInterval(this.combatStartLog, 2000);
    $('#combatLog').empty();
}

combatStartLog(){
    console.log(this.idMsg);
    switch (this.idMsg){
        case 3:
            clearInterval(this.timerInterval);
            $('#combatLog').empty();
            break;
        case 2:
            $('<p>', {
                class: 'combatText',
                id: `${this.idMsg}`
            }).appendTo('#combatLog');
            $(`#${this.idMsg}`).append(`FIGHT!`);
            this.idMsg = 3;
            break;
        case 1:
            $('<p>', {
                class: 'combatText',
                id: `${this.idMsg}`
            }).appendTo('#combatLog');
            $(`#${this.idMsg}`).append(`Prepare your potions...`);
            this.idMsg = 2;
            break;
        case 0:
            $('<p>', {
                class: 'combatText',
                id: `${this.idMsg}`
            }).appendTo('#combatLog');
            $(`#${this.idMsg}`).append(`Unsheathe your weapons...`);
            this.idMsg = 1;
        break;
        default:
            this.idMsg = 0;
    }
}

Желаемое поведение будет:

  • я называю метод startTimer()
  • Он вызывает combatStartLog() как интервал
  • В каждом интервале свойство idMsg объекта попадает в соответствующий случай
  • case '3' очищает интервал и прерывает цикл.

Что на самом деле происходит:

  • Я не знаю, почему в первом интервале idMsg создается как undefined, хотя его начальное значение задано в конструкторе:

Конструктор 

constructor(){
    this.idMsg = 0;
    this.timerInterval;
}
  • Я «исправил» проблему выше, добавив регистр по умолчанию с кодом this.idMsg = 0;, и когда он достигает case 3 , idMsg устанавливается на 0 но интервал никогда не очищается и цикл продолжается и включается и включается вечно.

1 Ответ

5 голосов
/ 26 марта 2019

Передав функцию в функцию setInterval, когда она вызывается, переменная this теряет контекст. Поэтому вам необходимо убедиться, что привязано 'this' из battleStartLog к экземпляру объекта CombatLog: 

class CombatLog {
constructor(){
this.idMsg = 0;
this.timerInterval;
this.combatStartLog = this.combatStartLog.bind(this);}}

Когда вы вызываете new CombatLog (), он вызывает функцию конструктора с 'this' в качестве экземпляра нового объекта. Переназначая battleStartLog для combarStartLog, привязанного к новому объекту, «this» внутри battleStartLog ссылается на вновь созданный объект.

...