有限状态算法

Question

在 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
        });
    });

Answer 1

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

$('#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
    });
});

有限状态算法

Finite State Algorithm

javascript

state-machine