如何在下一个事件循环中显示警报？

Question

我正在学习VueJS，并创建了这个小练习游戏来增强我对Vue的知识。

http://jsfiddle.net/mzref4o0/1/

此攻击方法还将确定获胜者：

attack: function(isSpecialAttack) {
        let youHurt = Math.floor(Math.random() * 10);
      let monsterHurt = Math.floor(Math.random() * 10);
      if (isSpecialAttack) {
        youHurt = Math.floor(Math.random() * (20 - 10 + 1)) + 10;
        monsterHurt = Math.floor(Math.random() * (20 - 10 + 1)) + 10;
      }
        this.you.bloodLevel -= youHurt;
      this.monster.bloodLevel -= monsterHurt;

      this.messages.push([
        {id: this.getRandomId, turn: 'you', msg: 'PLAYER HTIS MONSTER FOR ' + monsterHurt},
        {id: this.getRandomId, turn: 'monster', msg: 'MONSTER HTIS PLAYER FOR ' + youHurt}
      ])


      if (this.you.bloodLevel <= 0 || this.monster.bloodLevel <= 0) {
        if (this.you.bloodLevel <= 0) {
          alert('you lost');
        } else {
          alert('you won');
        }
      }
    },

问题是，警报消息在“攻击”发生之前出现，这意味着血棒下降&在警报消息显示之后添加消息。如何使警报仅在这两个事件发生后才显示？

我认为这个问题是由于事件循环...但这就是我所知道的。

Answer 1

你正在尝试实现的东西不能真的和alert一起工作。

alert方法阻塞了代码的执行，因此在释放该块之前，浏览器不会开始处理重新绘制。

解决方案was suggested in other stackoverflow post.

我强烈建议使用更现代的技术，比如vue-js modals。

无论如何，这段代码应该可以工作：

    if (this.you.bloodLevel <= 0 || this.monster.bloodLevel <= 0) {
      if (this.you.bloodLevel <= 0) {
        setTimeout("alert('you lost');", 1);

      } else {
        setTimeout("alert('you won');", 1);

      }
    }