Question

所以我试图用Javascript模仿那个旧的基于记忆的游戏Simon。

我目前正试图让'Simon'生成随机命令以“回放”（点亮div，播放音频）。我写了一个函数，它将一个列表/数组的命令作为输入，Simon在使用setInterval的每个命令回放之间播放1秒。

function go_simon(simon_array) {

    var counter = 0;
    var interval = setInterval( function() {

        var current_val = parseInt(simon_array[counter]);
        switch (current_val) {
            case 1:
                TL_lightOn();
                var interval_1 = setTimeout( function() { TL_lightOff() }, 600);
                break;
            case 2:
                BL_lightOn();
                var interval_2 = setTimeout( function() { BL_lightOff() }, 600);
                break;
            case 3:
                BR_lightOn();
                var interval_3 = setTimeout( function() { BR_lightOff() }, 600);
                break;
            case 4:
                TR_lightOn();
                var interval_4 = setTimeout( function() { TR_lightOff() }, 600);
                break;
        }
        counter++;
        if (counter >= simon_array.length) 
            clearInterval(interval);

    }, 1000);
}

我把这个函数放在一个do-while循环中，作为主游戏循环，在其中生成一个随机命令并附加到正在进行的命令列表中，并调用'go-simon'函数它会播放当前的命令列表。

我原本打算为每个循环迭代组成：

 •Generate random command (1-4)
 •Append to running array of commands
 •Playback array of commands over time duration - # of commands * seconds

相反，循环...循环而不是在多秒内执行go_simon函数。我将循环限制为10次迭代，每次迭代使用alert()。这导致警报被快速连续调用10次，并且最后只调用一次go_simon（），播放充满10个命令的数组。

do {
    // create int 1-4 and append to global array
    generate_value();

    alert(simon_array);
    go_simon(simon_array);

    if (simon_array.length >= 10) {
            alert(simon_array);
        condition = false;
    }
} while (condition);

有关如何获取此do-while循环以使每次迭代正确执行go_simon函数的任何建议吗？

非常感谢

Answer 1

你必须让go_simon告诉你什么时候完成，因为它是异步工作的。只有这样你才能生成一个新值并再次调用它（可能在一定的延迟之后）。

你可以通过让函数接受回调来做到这一点，当你清除间隔时调用它：

function go_simon(simon_array, callback) {

    var counter = 0;
    var interval = setInterval( function() {

        var current_val = parseInt(simon_array[counter]);
        switch (current_val) {
            case 1:
                TL_lightOn();
                var interval_1 = setTimeout( function() { TL_lightOff() }, 600);
                break;
            case 2:
                BL_lightOn();
                var interval_2 = setTimeout( function() { BL_lightOff() }, 600);
                break;
            case 3:
                BR_lightOn();
                var interval_3 = setTimeout( function() { BR_lightOff() }, 600);
                break;
            case 4:
                TR_lightOn();
                var interval_4 = setTimeout( function() { TR_lightOff() }, 600);
                break;
        }
        counter++;
        if (counter >= simon_array.length) {
            clearInterval(interval);
            callback();
        ;

    }, 1000);
}

不要使用同步循环，让函数再次从回调中调用，直到满足条件：

function run(){
    generate_value();
    if (simon_array.length < 10) {
        go_simon(simon_array, run);
    }
}
run();

JavaScript - setInterval不在每次迭代的do-while循环内执行

1 个答案: