04.异步转换

开始读这篇文章之前，你应该已经熟悉了状态机生命周期事件。

有时，你需要在状态转换期间执行一些异步代码，并确保在代码完成之前不会进入新的状态。这方面一个很好的例子是：当你离开一个状态并逐渐淡出UI组件时，或者将其从屏幕上滑出，并且在动画完成之前不想转换到下一个状态

你可以通过从任意生命周期事件中返回一个Promise对象来实现。

从生命周期事件返回一个Promise将导致转换动作的生命周期暂停。它可以通过解决Promise来继续，或拒绝Promise来取消转换动作。

例如(使用jQuery效果)：

  var fsm = new StateMachine({

    init: 'menu',

    transitions: [
      { name: 'play', from: 'menu', to: 'game' },
      { name: 'quit', from: 'game', to: 'menu' }
    ],

    methods: {

      onEnterMenu: function() {
        return new Promise(function(resolve, reject) {
          $('#menu').fadeIn('fast', resolve)
        })
      },

      onEnterGame: function() {
        return new Promise(function(resolve, reject) {
          $('#game').fadeIn('fast', resolve)
        })
      },

      onLeaveMenu: function() {
        return new Promise(function(resolve, reject) {
          $('#menu').fadeOut('fast', resolve)
        })
      },

      onLeaveGame: function() {
        return new Promise(function(resolve, reject) {
          $('#game').fadeOut('fast', resolve)
        })
      }
    }

  })

确保始终有解决(或拒绝)Promise，否则状态机将永远卡在这个未确定的转换中。