异步转换
有时,你需要在状态转换期间执行一些异步代码,并确保在代码完成之前不会进入新的状态。这方面一个很好的例子是:当你离开一个状态并逐渐淡出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)
})
}
}
})
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!