2

Estou fazendo um jogo em javascript, é tipo o jogo genius.Estou usando o setTimeout dentro do for.

function executarJogo(numeroJogada){
    var cores = ["#FFFF00","#00FF00","#0000FF","#FF0000"];
    for (var i = 0; i < numeroJogada; i++) {
        var numQuadro = Math.floor((Math.random() * 4) + 1);
        var corQuadro = Math.floor((Math.random() * 4) + 1);
        var q = "c" + numQuadro;
        console.log(corQuadro -1,cores[corQuadro-1]);
        var quadrado = document.getElementById(q);
        quadrado.style.background=cores[corQuadro-1];
        doTimeOut(quadrado);

    }
}

function doTimeOut (quadrado) {
    setTimeout(function() {quadrado.style.background="#cdc8b1";}, 1000);
}

O problema é: quando executo o for 3 vezes por exemplo ao invés de mudar a cor de uma div e voltar a cor normal, pra depois mudar a cor de outra div e voltar ao normal, está mudando a cor de todas as divs ao mesmo tempo, como se o settimeout não estivesse esperando os 1000 milissegundos.

1 Resposta 1

4

Você tem que multiplicar o número do setTimeout a cada chamada:

var chamadas = 0;
function doTimeOut (quadrado) {
    chamadas++;
    setTimeout(function() {quadrado.style.background="#cdc8b1";}, chamadas*1000);
}

E também deve limpar a variável ao termino de cada rodada.

var chamadas = 0;

Isso acontece pois o loop é executado bem rápido: ou seja, supondo:

Execução:

0 -> setTimeout(function(){var d = new Date(); var t = d.getTime(); console.log(t)},1000);
1 -> setTimeout(function(){var d = new Date(); var t = d.getTime(); console.log(t)},1000);
2 -> setTimeout(function(){var d = new Date(); var t = d.getTime(); console.log(t)},1000);

Saída:

0 -> 1413210680551
1 -> 1413210680551
2 -> 1413210680552 

Note que a diferença agora é de 1 ou nenhum milissegundo.

Simulação 2:

var chamadas = 1;
setTimeout(function(){var d = new Date(); var t = d.getTime(); console.log(t)},chamadas*1000);
chamadas++;
setTimeout(function(){var d = new Date(); var t = d.getTime(); console.log(t)},chamadas*1000);
chamadas++;
setTimeout(function(){var d = new Date(); var t = d.getTime(); console.log(t)},chamadas*1000);

Saída:

0 -> 1413210718070
1 -> 1413210719069
2 -> 1413210720069

Note que a saída agora tem diferença de 1000 milissegundos, ou seja, 1 segundo.


como se o settimeout não estivesse esperando os 1000 milissegundos.

Na verdade está esperando os 1000 milissegundos, só que está esperando esse tempo para todas as saídas.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .