Question

我正在尝试制作一个简单的记忆游戏，其中一个形状在屏幕上闪烁x次并且用户必须记住颜色。

我正在尝试使用循环结合switch语句来更改每次迭代的颜色。但是，颜色没有变化，我被卡住了。

谁能告诉我我做错了什么？

代码如下：

$(document).ready(function() {

var colorArray = []; // stores which colours have been generated

var changeColour = function(){
var generateShape = Math.floor(Math.random() * 5) // Generates a number from 0-4

switch (generateShape){
            case 0:
                $('#shapeDiv').css('background-color','black');
                $('#shapeDiv').fadeOut(500);
                colorArray.push('B');
                break;
            case 1:
                $('#shapeDiv').css('background-color','red');
                $('#shapeDiv').fadeOut(500);
                colorArray.push('R');
                break;
            case 2:
                $('#shapeDiv').css('background-color','yellow');
                $('#shapeDiv').fadeOut(500);
                colorArray.push('Y');
                break;
            case 3:
                $('#shapeDiv').css('background-color','blue');
                $('#shapeDiv').fadeOut(500);
                colorArray.push('BL');
                break;
            case 4:
                $('#shapeDiv').css('background-color','pink');
                $('#shapeDiv').fadeOut(500);
                colorArray.push('P');
                break;
        };
}

$('#subbutton').click(function(){

        // make shape appear 5 times with random colour
    while (colorArray.length<5){

        $('#shapeDiv').fadeIn(500);
        changeColour();

    };
})
});

Answer 1

问题是，你的while循环运行并创建随机数。但是fadeIn和fadeOut是异步的。循环在远低于500毫秒的时间内完成，generateShape作为最后生成的值，然后在switch中使用。

我无法想到为避免这种情况而对代码进行简单的更改。我认为你必须考虑到annimations的异步性质，制定另一个解决方案。

Answer 2

使用间隔解决它：

$(document).ready(function() {

var interval = 0;
var colorArray = [];

var changeColour = function(){
    console.log(colorArray);

    var generateShape = Math.floor(Math.random() * 5) // Generates a number from 0-4

    switch (generateShape){
                case 0:
                    $('#shapeDiv').css('background-color','black');
                    colorArray.push('B');
                    break;
                case 1:
                    $('#shapeDiv').css('background-color','red');
                    colorArray.push('R');
                    break;
                case 2:
                    $('#shapeDiv').css('background-color','yellow');
                    colorArray.push('Y');
                    break;
                case 3:
                    $('#shapeDiv').css('background-color','blue');
                    colorArray.push('BL');
                    break;
                case 4:
                    $('#shapeDiv').css('background-color','pink');
                    colorArray.push('P');
                    break;
            };
    if (colorArray.length > 5){
        clearInterval(interval);
    }
};

$('#subbutton').click(function(){
    interval = setInterval(changeColour,1000);
})
});

使用loop / switch语句组合无法获得div的颜色

2 个答案: