有限状态算法

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