Vue watch не срабатывает при изменении значения данных на то же значение

Я создаю клон UNO, я использовал наблюдатель для выполнения кода при каждом запуске хода:

  watch: {
    // on turn change
    async turnId(val) {
      const isUserTurn = val === 0;

      if (isUserTurn) {
        // reset has drawed flag
        // this.hasDrawed = false;
      } else {
        await setTimeout(() => this.playAI(), 1000);
      }
    },
  },

когда это не очередь пользователя, этот код запускается:

await setTimeout(() => this.playAI(), 1000);

метод playAI:

    playAI() {
      // get the card and play it
      this.play(card)
    },
    play(card) {
      // play the card (delete from hand and put on piletop)

      this.nextTurn();

      if (card.value === '+4') {
        this.currentPlayer.hand.push(...this.draw(4));
        this.nextTurn();
      } else if (card.value === '+2') {
        this.currentPlayer.hand.push(...this.draw(2));
        this.nextTurn();
      } else if (card.value === 'skip') {
        this.nextTurn();
      }
    },
    nextTurn() {
      // if the turn id is greater than the total number of players then back it up
      if (this.turnId === this.playersNumber - 1) this.turnId = 0;
      else this.turnId += 1;
    },

Проблема в том, что когда ИИ разыгрывает такую ​​карту, как пропуск, он разыгрывает карту (пропускает), дважды запускает метод следующего хода (turnId + 2), но наблюдатель на повороте не запускается во второй раз, поэтому ИИ прекращает играть.

  • Эта ошибка возникает только при повороте ИИ, а не пользователя, поэтому я думаю, что ошибка исходит от наблюдателя.
  • Я тестирую его только с двумя игроками, поэтому, когда ИИ разыгрывает карту, например пропуск, ход возвращается к нему (он меняется, но возвращается с тем же значением, что и раньше), так что это может быть ошибка, так как когда метод перестает работать значение turnId такое же, как и до вызова функции

Если это ошибка, как я могу заставить наблюдателя работать?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
1 403
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Наблюдатель выполняется только один раз в цикле событий, второй вызов следует выполнять асинхронно.


добавить

пример:

    play(card) {
      // play the card (delete from hand and put on piletop)

      this.nextTurn();
      setTimeout(() => {
        if (card.value === '+4') {
          this.currentPlayer.hand.push(...this.draw(4));
          this.nextTurn();
        } else if (card.value === '+2') {
          this.currentPlayer.hand.push(...this.draw(2));
          this.nextTurn();
        } else if (card.value === 'skip') {
          this.nextTurn();
        }
      }, 0)
    }

Таким образом, наблюдатель будет выполняться дважды, но это приведет к непредвиденным результатам, и вам нужно будет подумать, как настроить

Как мне это сделать?

Francesco Dorati 21.12.2020 13:32
Ответ принят как подходящий

Мне удалось решить эту проблему, изменив метод воспроизведения:

  play(card) {

    if (card.value === 'reverse') { // if card is reverse
      this.isReversed = !this.isReversed; // inverse reversed flag
    } else if (card.value === 'skip') { // if card is skip
      this.skipTurn = true; // set skip flag
    } else if (card.value === '+2') { // if card is +2
      this.nextPlayer.hand.push(...this.draw(2)); // nextPlayer draws 2
      this.nextPlayer.hand.sort(this.sortHandler); // sort the hand of the player who draws
      this.skipTurn = true; // set skip flag
    } else if (card.value === '+4') { // if card is +4
      this.nextPlayer.hand.push(...this.draw(4)); // nextPlayer draws 4
      this.nextPlayer.hand.sort(this.sortHandler); // sort the hand of the player who draws
      this.skipTurn = true; // set skip flag
    }

    // next turn
    this.nextTurn();
  }

  • Я создал вычисляемый nextPlayer, который делает то же самое, что и currentPlayer, но на следующем.
  • Я также создал флаг, который проверяет, должен ли следующий игрок пропустить ход, и проверил его в наблюдателе:
  turnId(turn) {
    if (this.skipTurn) {
      this.skipTurn = false;
      this.nextTurn();
      return;
    }

    if (turn !== 0) { // if it's bot's turn
      this.playAI();
    }
  },

Другие вопросы по теме