javascript-state-machine文档翻译05:异步转换

本文介绍了如何在状态机转换过程中执行异步代码,如UI动画,并通过返回Promise来控制状态转换的流程。当从一个状态过渡到另一个状态时,例如淡入淡出UI组件,必须等待动画完成。通过在生命周期事件中返回Promise,可以暂停状态机,直到Promise解决或拒绝,从而确保转换的正确顺序。
摘要由CSDN通过智能技术生成

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

有时,你需要在状态转换期间执行一些异步代码,并确保在代码完成之前不会进入新的状态。这方面一个很好的例子是:当你离开一个状态并逐渐淡出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,否则状态机将永远卡在这个未确定的转换中。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值