【有限状态机方法不执行的BUG _事件 _有限状态机】

有限状态机方法不执行的BUG
我也踩过这个坑( 1 )
已统计您的踩坑,无需重复点击
回答(0)
事件有限状态机
详细描述
截图
代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="state-machine.js"></script>
    <style>
        button {
            display: block;
            margin: 30px 0;
            width: 50px;
            height: 20px;
        }
    </style>
</head>
<body>
<button id="one">one</button>
<button id="two">two</button>
<button id="three">three</button>
<button id="four">four</button>
<script>
    $(document).ready(function () {
        var fsm = new StateMachine({
            init: 'test1',
            transitions: [
                {name: 'kill', from: 'test1', to: 'test2'},
                {name: 'ghost', from: 'test2', to: 'test3'},
                {name: 'speak', from: 'test3', to: 'test4'},
                {name: 'vote', from: 'test4', to: 'test1'}
            ],
            methods: {
                onAfterKill: function (lifecycle) {
                    console.log("状态: "+ fsm.state);
                    sessionStorage.setItem('stateOne',fsm.state);
                    $('#one').css('background-color', 'orange');
                },
                onGhost: function (lifecycle) {
                    console.log("状态: "+ fsm.state);
                    sessionStorage.setItem('stateTwo',fsm.state);
                    $('#two').css('background-color', 'orange');
                },
                onSpeak: function (lifecycle) {
                    console.log("状态: "+ fsm.state);
                    sessionStorage.setItem('stateThree',fsm.state);
                    $('#three').css('background-color', 'orange');
                },
                onAfterVote: function (lifecycle) {
                    console.log("状态: "+ fsm.state);
                    sessionStorage.setItem('stateFour',fsm.state);
                    sessionStorage.removeItem('stateOne');
                    sessionStorage.removeItem('stateTwo');
                    sessionStorage.removeItem('stateThree');
                }
            }
        });
        var One = sessionStorage.getItem('stateOne');
        var Two = sessionStorage.getItem('stateTwo');
        var Three = sessionStorage.getItem('stateThree');
        function test() {
            if(One === "test2"){
                $('#one').css('background-color', 'orange');
            }
            if(Two === "test3"){
                $('#two').css('background-color', 'orange');
            }
            if(Three === "test4"){
                $('#three').css('background-color', 'orange');
            }
        }
        $('#one').click(function () {
            if(One === "test2"){
                alert("请按步骤来!");
            }else {
                fsm.kill();
                alert("点击了one按钮");
            }
        });
        $('#two').click(function () {
            if(One !== "test2"){
                alert("请按步骤来!");
            }else {
                fsm.kill();
                if(Two !== "test3"){
                    fsm.ghost();
                    alert("点击了two按钮");
                }
            }
        });
        $('#three').click(function () {
            if(One !== "test2"){
                alert("请按步骤来!");
            }else {
                if(Three === "test4"){
                    alert("请按步骤来!");
                }else {
                    fsm.speak();
                    alert("点击了three按钮");
                }
            }
        });
        $('#four').click(function () {
            if(One !== "test2"){
                alert("请按步骤来!");
            }else {
                fsm.vote();
                alert("点击了four按钮");
            }
        });
    })
</script>
</body>
</html>
编辑于2024-11-13