次のイベントループで警告を表示するにはどうすればいいですか？

Question

私はVueJSを学んでいて、この小さな練習ゲームを作成して、私の知識を向上させました。

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'); 
     } 
     } 
    }, 

問題が血バーが&メッセージがあるの低下を意味し、「攻撃」は起こる前に警告メッセージが表示されることです警告メッセージが表示された後に追加されます。その2つのことが起こった後にのみ、アラートの表示を行うにはどうすればよいですか？

私はこの問題がイベントループに起因すると考えています...しかし、それはすべて私が知っていることです。

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); 

     } 
    }