javascript - 在函数调用之前执行非函数代码

Question

我正在开发一个简单的 Vue 游戏应用程序，该应用程序带有按钮，可在单击按钮时按一定范围内的随机数降低玩家或“恶魔”的生命值。在我的 Vue 实例中有一个方法 attack 计算伤害并检查游戏是否结束(如果它导致玩家或恶魔的健康状况变为/低于零)。目前，如果它等于或低于零，将调用 JS 内置的确认功能来宣布玩家赢或输，并询问他们是否要开始新游戏。但是，我想先检查玩家或恶魔的健康状况是否 <= 0，如果是，则将健康状况设置为 0，这样它就会反射(reflect)在“健康栏”中，因为现在它显示的是它到达之前的状态/低于 0。

 checkWin: function() {
      if (this.demonHealth <= 0) {
        // this.demonHealth = 0; <-- applied after confirm();
        if (confirm('You won! New game?')) {
          this.startGame();
        } else {
          this.gameIsRunning = false;
        }
        return true;
      } else {
        // this.playerHealth = 0; <-- applied after confirm();
        if (this.playerHealth <= 0) {
          if (confirm('You lost. New game?')) {
            this.startGame();
          } else {
            this.gameIsRunning = false;
          }
          return true;
        }
      }
    }

完整代码:https://codepen.io/nataliecardot/pen/XWrMedm

这是完整的 Vue 实例:

new Vue({
  el: '#app',
  data: {
    playerHealth: 100,
    demonHealth: 100,
    gameIsRunning: false
  },
  methods: {
    startGame: function() {
      this.gameIsRunning = true;
      this.playerHealth = 100,
      this.demonHealth = 100
    },
    attack: function() {
      this.demonHealth -= this.calculateDamage(3, 10);
      if (this.checkWin()) {
        return;
      }

      this.playerHealth -= this.calculateDamage(5, 12);
      this.checkWin();
    },
    calculateDamage: function(min, max) {
      return Math.max(Math.floor(Math.random() * max) + 1, min);
    },
    checkWin: function() {
      if (this.demonHealth <= 0) {
        // this.demonHealth = 0; <-- applied after confirm();
        if (confirm('You won! New game?')) {
          this.startGame();
        } else {
          this.gameIsRunning = false;
        }
        return true;
      } else {
        // this.playerHealth = 0; <-- applied after confirm();
        if (this.playerHealth <= 0) {
          if (confirm('You lost. New game?')) {
            this.startGame();
          } else {
            this.gameIsRunning = false;
          }
          return true;
        }
      }
    }
  }
});

我还尝试删除 checkWin() 函数，添加一个新方法来检查分数是否 <= 0，如果是，则将其设置为零，并在回调中使用 checkWin() 中的代码。这导致应用了零，但没有调用 confirm()，游戏继续进行:

methods: {
    startGame: function() {
      this.gameIsRunning = true;
      this.playerHealth = 100,
      this.demonHealth = 100
    },
    scoreCheck: function() {
      if (this.demonHealth < 0) {
        this.demonHealth = 0;
      }
      if (this.playerHealth < 0) {
        this.playerHealth = 0;
      }
    },
    attack: function() {
      this.demonHealth -= this.calculateDamage(3, 10);
      this.scoreCheck(() => {
        if (this.demonHealth === 0) {
          if (confirm('You won! New game?')) {
            this.startGame();
          } else {
            this.gameIsRunning = false;
          }
          return;
        }
      });

      this.playerHealth -= this.calculateDamage(5, 12);
      this.scoreCheck(() => {
        if (this.playerHealth === 0) {
          if (confirm('You lost. New game?')) {
            this.startGame();
          } else {
            this.gameIsRunning = false;
          }
        }
      });
    },
    calculateDamage: function(min, max) {
      return Math.max(Math.floor(Math.random() * max) + 1, min);
    },
  }

编辑:我也在原始代码上尝试了 $nextTick()，但它和以前一样工作:

checkWin: function() {
  if (this.demonHealth <= 0) {
    this.demonHealth = 0;
    this.$nextTick(function() {
      if (confirm('You won! New game?')) {
        this.startGame();
      } else {
        this.gameIsRunning = false;
      }
      return true;
    });
  } else {
    if (this.playerHealth <= 0) {
      this.playerHealth = 0;
      this.$nextTick(function() {
        if (confirm('You lost. New game?')) {
          this.startGame();
        } else {
          this.gameIsRunning = false;
        }
        return true;
      });
    }
  }
}

Answer 1

实际上我想将其标记为重复 - 但后来我意识到大多数解决方案都建议使用 setTimout - 这会在 javascript 和浏览器呈现之间创建一个不需要的竞争条件。

当你在 vue 的范围内改变对象属性时 - 这意味着它们是 react 性的 - 并且你想等待 dom 更新和 dom 渲染，你可以执行以下操作:

首先 await vm.$nextTick() 它将计算 dom然后用 double requestAnimationFrame 让浏览器有喘息的时间。

作为实现示例:

Vue.skipFrame = function(){

  return new Promise(resolve => {
    requestAnimationFrame(() => 
    requestAnimationFrame(resolve)
    )
  })
}
let app = new Vue({
  el: '#app',
  data: {
    monster: 10,
    hero: 100
  },

  methods: {
    attack() {
      this.monster = Math.max(
        this.monster - (Math.random() * 10)|0, 
        0
      )
      
      
      this.checkWin()
    },
    async checkWin(){
      await this.$nextTick()
      await Vue.skipFrame()
      if(this.monster == 0){
        confirm('You won! Again?') ?
        this.start():
        this.quit()
      }
    },
    start() {
      this.hero = 100;
      this.monster = 100;
    },
    quit(){
      this.monster = 1000;
      
    }
  }

  });

.as-console-wrapper{
  height: 0px !important
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  
  <h1>Monster HP: {{monster}}</h1>
  <h1>Hero HP: {{hero}}</h1>
  <button @click="attack">Attack</button>
</div>