有限状态算法

问题描述

在JavaScript中，我绘制了一些状态并试图可视化有限状态机。

但是它似乎没有按我预期的那样工作。如果我输入B，它将进入状态s0，从那里开始带有“ T”，然后进入状态s2，带有“ X”，它将进入状态s3。到现在为止还挺好。但是如果我处于状态s3并键入值'S'继续进入状态s5，因为它应该是console.log（）告诉我当前状态是s1。如果我处于状态s4，并且想输入字母“ V”，则不会发生同样的情况，因为它不会移至状态s5，而是会上升至状态s3。我在代码中看不到我在做什么错。 ：（

const machine = {
        state: 'initialState',// Initial state wait for input
        transitions: {
            initialState: {
                changeState: function(textfieldValue) {
                    if (textfieldValue.type === 'B') {
                        this.changeState('s0');                         // Update state
                        fillColors0();                                  // Call function fillColor
                        console.log('Current State: ' + this.state);
                    } else {
                        console.info(this.state);
                    }
                }
            },s0: {                                                       // State: s0
                changeState: function(textfieldValue) {
                    if (textfieldValue.type === 'P') {
                        this.changeState('s1');                         // Update state
                        fillColors1();                                  // Call function fillColor
                        console.log('Current State: ' + this.state);
                    } else if (textfieldValue.type === 'T') {
                        this.changeState('s2');                         // Update state
                        fillColors2();                                  // Call function fillColor
                        console.log('Current State: ' + this.state);
                    }
                }
            },s1: {                                                       // State: s1
                changeState: function(textfieldValue) {
                    if (textfieldValue.type === 'T') {
                        this.changeState('s1');                         // Update state
                        fillColors1();                                  // Call function fillColor
                        console.log('Current State: ' + this.state);
                    } else if (textfieldValue.type === 'V') {
                        this.changeState('s4');                         // Update state
                        fillColors4();                                  // Call function fillColor
                        console.log('Current State: ' + this.state);
                    }
                }
            },s2: {                                                       // State: s2
                changeState: function(textfieldValue) {
                    if (textfieldValue.type === 'S') {
                        this.changeState('s2');                         // Update state
                        fillColors2();                                  // Call function fillColor
                        console.log('Current State: ' + this.state);
                    } else if (textfieldValue.type === 'X') {
                        this.changeState('s3');                         // Update state
                        fillColors3();                                  // Call function fillColor
                        console.log('Current State: ' + this.state);
                    }
                }
            },s3: {                                                       // State: s3
                changeState: function(textfieldValue) {
                    if (textfieldValue.type === 'X') {
                        this.changeState('s1');                         // Update state
                        fillColors1();                                  // Call function fillColor
                        console.log('Current State: ' + this.state);
                    } else if (textfieldValue.type === 'S') {
                        this.changeState('s5');                         // Update state
                        fillColors5();                                  // Call function fillColor
                        console.log('Current State: ' + this.state);
                    }
                }
            },s4: {                                                       // State: s4
                changeState: function(textfieldValue) {
                    if (textfieldValue.type === 'P') {
                        this.changeState('s3');                         // Update state
                        fillColors3();                                  // Call function fillColor
                        console.log('Current State: ' + this.state);
                    } else if (textfieldValue.type === 'V') {
                        this.changeState('s5');                         // Update state
                        fillColors5();                                  // Call function fillColor
                        console.log('Current State: ' + this.state);
                    }
                }
            },s5: {                                                       // State: s5
                changeState: function(textfieldValue) {
                    if (textfieldValue.type === 'E') {
                        this.changeState('finiteState');                // Update state
                        fillColors6();                                  // Call function fillColor
                        console.log('Current State: ' + this.state);
                    }
                }
            },},dispatch(actionName,...payload) {
            const action = this.transitions[this.state][actionName];

            if (action) {
                action.apply(machine,...payload);
            } else {
                //action is not valid for current state
            }
        },changeState(newState) {
            this.state = newState;
        }
    };

    let currentState = Object.create(machine,{
        name: {
            writable: false,enumerable: true,value: "currentState"
        }
    });

    console.log('Current State: ' + currentState.state);

    $('#reberTextfield').keyup(function() {                             // Check value in textfield
        var value = $('#reberTextfield').val();                         // Read value from textfield
        $('#startBtn').on('click',function() {                         // Submit value if start button is clicked
            currentState.dispatch('changeState',[{ type: value }]);

            $('#reberTextfield').val('');                               // Clear input
        });
    });

解决方法

看起来，您输入了一些旧值。

$('#reberTextfield').keyup(function() { // Check value in textfield
    $('#startBtn').on('click',function() { // Submit value if start button is clicked
        var value = $('#reberTextfield').val(); // <<<<<<<<<<<<<<< move it here
        currentState.dispatch('changeState',[{ type: value }]);

        $('#reberTextfield').val(''); // Clear input
    });
});