Skip to content

Javascript – SetTimeOut not working as intended

I’ve been trying to make a game as an exercise for class and I wanted to add a “timer” on it using “SetTimeOut”.

If the timer reaches 0 the game should end instantly, but apparently the time starts running when the game ends, and not when the game starts.

In this example I’ve put 4000 milliseconds just for testing purposes.

Here’s my code:

var questions = [
{ letter: "a", answer: "abducir", status: 0, question: ("CON LA A. Dicho de una supuesta criatura extraterrestre: Apoderarse de alguien"), question1:("CON LA A. No murado, no cercado o no cerrado"),answer1:"abierto" },
{ letter: "b", answer: "bingo", status: 0, question: ("CON LA B. Juego que ha sacado de quicio a todos los 'Skylabers' en las sesiones de precurso"), question1:("CON LA B. Herramienta formada por una barra metálica con la punta en espiral, para hacer agujeros en material duro"),answer1:"broca" },
{ letter: "c", answer: "churumbel", status: 0, question: ("CON LA C. Niño, crío, bebé"), question1:("CON LA C. Cosa apreciable que se adquiere a poca costa"),answer1:"chollo" },
{ letter: "d", answer: "diarrea", status: 0, question: ("CON LA D. Anormalidad en la función del aparato digestivo caracterizada por frecuentes evacuaciones y su consistencia líquida"), question1:("CON LA D. Conjunto de dientes, muelas y colmillos que tiene en la boca una persona o un animal"),answer1: "dentadura"},
{ letter: "e", answer: "ectoplasma", status: 0, question: ("CON LA E. Gelatinoso y se encuentra debajo de la membrana plasmática. Los cazafantasmas medían su radiación"), question1:("CON LA E. Hacer uso por primera vez de algo"),answer1:"estrenar" },
{ letter: "f", answer: "facil", status: 0, question: ("CON LA F. Que no requiere gran esfuerzo, capacidad o dificultad"), question1:("CON LA F. Tratamiento de las enfermedades o lesiones por medio de elementos mecánicos, como el masaje o la gimnasia"),answer1: "fisioterapia"},
{ letter: "g", answer: "galaxia", status: 0, question: ("CON LA G. Conjunto enorme de estrellas, polvo interestelar, gases y partículas"), question1:("CON LA G.  Gran porción de mar que se interna en la tierra entre dos cabos"),answer1:"golfo" },
{ letter: "h", answer: "harakiri", status: 0, question: ("CON LA H. Suicidio ritual japonés por desentrañamiento"), question1:("CON LA H. Restablecer el grado de humedad normal de la piel u otros tejidos"),answer1:"hidratar" },
{ letter: "i", answer: "iglesia", status: 0, question: ("CON LA I. Templo cristiano"), question1:("CON LA I. País europeo con capital en Dublín"),answer1:"irlanda" },
{ letter: "j", answer: "jabali", status: 0, question: ("CON LA J. Variedad salvaje del cerdo que sale en la película 'El Rey León', de nombre Pumba"), question1:("CON LA J. Grupo musical de funk que en 1996 publicó el álbum Travelling without Moving"),answer1:"jamiroquai" },
{ letter: "k", answer: "kamikaze", status: 0, question: ("CON LA K. Persona que se juega la vida realizando una acción temeraria"), question1:("CON LA K. Arte marcial"),answer1:"karate" },
{ letter: "l", answer: "licantropo", status: 0, question: ("CON LA L. Hombre lobo"), question1:("CON LA L. Viento procedente del este"),answer1:"levante" },
{ letter: "m", answer: "misantropo", status: 0, question: ("CON LA M. Persona que huye del trato con otras personas o siente gran aversión hacia ellas"), question1:("CON LA M. Persona que, por su humor tétrico, manifiesta aversión al trato humano"),answer1:"misantropo" },
{ letter: "n", answer: "necedad", status: 0, question: ("CON LA N. Demostración de poca inteligencia"), question1:("CON LA N. Natural del país europeo con capital en Oslo"),answer1:"noruego" },
{ letter: "ñ", answer: "señal", status: 0, question: ("CONTIENE LA Ñ. Indicio que permite deducir algo de lo que no se tiene un conocimiento directo.") , question1:("CONTIENE LA Ñ. Día futuro"),answer1:"mañana"},
{ letter: "o", answer: "orco", status: 0, question: ("CON LA O. Humanoide fantástico de apariencia terrible y bestial, piel de color verde creada por el escritor Tolkien"), question1:("CON LA O. Anticuado, inadecuado a las circunstancias actuales"),answer1:"obsoleto" },
{ letter: "p", answer: "protoss", status: 0, question: ("CON LA P. Raza ancestral tecnológicamente avanzada que se caracteriza por sus grandes poderes psíonicos del videojuego StarCraft"), question1:("CON LA P. Se dice de un niño de muy corta edad"),answer1:"pequeño" },
{ letter: "q", answer: "queso", status: 0, question: ("CON LA Q. Producto obtenido por la maduración de la cuajada de la leche"), question1:("Contiene la Q. Sitio poblado de árboles y matas"),answer1:"bosque" },
{ letter: "r", answer: "raton", status: 0, question: ("CON LA R. Roedor"), question1:("CON LA R. Espacio cercado en que combaten los boxeadores"),answer1:"ring" },
{ letter: "s", answer: "stackoverflow", status: 0, question: ("CON LA S. Comunidad salvadora de todo desarrollador informático"), question1:("CON LA S. Falta de ruido"),answer1:"silencio" },
{ letter: "t", answer: "terminator", status: 0, question: ("CON LA T. Película del director James Cameron que consolidó a Arnold Schwarzenegger como actor en 1984"), question1:("CON LA T. Silicato de magnesia que, en forma de polvo, se utiliza para la higiene y en la industria cosmética"),answer1:"talco" },
{ letter: "u", answer: "unamuno", status: 0, question: ("CON LA U. Escritor y filósofo español de la generación del 98 autor del libro 'Niebla' en 1914"), question1:("CON LA U. Apoderarse de una propiedad o de un derecho que legítimamente pertenece a otro, por lo general con violencia"),answer1:"usurpar" },
{ letter: "v", answer: "vikingos", status: 0, question: ("CON LA V. Nombre dado a los miembros de los pueblos nórdicos originarios de Escandinavia, famosos por sus incursiones y pillajes en Europa"), question1:("CON LA V. Día que antecede inmediatamente a otro determinado, especialmente si es fiesta"),answer1:"vispera" },
{ letter: "w", answer: "sandwich", status: 0, question: ("CONTIENE LA W. Emparedado hecho con dos rebanadas de pan entre las cuales se coloca jamón y queso"), question1:("CONTIENE LA W. Campo de concentración alemán"),answer1: "auswitchz"},
{ letter: "x", answer: "botox", status: 0, question: ("CONTIENE LA X. Toxina bacteriana utilizada en cirujía estética"), question1:("Contiene la X. Hacer flexible algo, darle flexibilidad"),answer1:"flexibilizar" },
{ letter: "y", answer: "peyote", status: 0, question: ("CONTIENE LA Y. Pequeño cáctus conocido por sus alcaloides psicoactivos utilizado de forma ritual y medicinal por indígenas americanos"), question1:("Contiene la Y.  Nombre propio del realizador que dirigió la película Revolver en 2005"),answer1:"guy" },
{ letter: "z", answer: "zen", status: 0, question: ("CON LA Z. Escuela de budismo que busca la experiencia de la sabiduría más allá del discurso racional"), question1:("CON LA Z. Segunda persona de singular del pretérito perfecto simple de indicativo del verbo zanjar"),answer1:"zanjaste" },
];
var ranking=[];
var board=[];
var answers=[];
for (var i in questions) {
  var random=Math.round(Math.random());
  if (random===0) {
board.push("question");
answers.push("answer");
}
  else {
    board.push("question1");
    answers.push("answer1");
  }
}
function compare(a,b) {

  if (a.puntuacion < b.puntuacion )
    return 1;
  else if (a.puntuacion > b.puntuacion)
    return -1;
  else 
    return 0;
}

function pasapalabra() {
var playername=prompt("Bienvenido a Pasapalabra. Puedes indicar tu 
nombre?");
var puntuacion=0;
var totalstatus=0;
alert("De acuerdo "+playername+", empecemos!");
setTimeout(function(){
    alert("Se acabó tu tiempo!");
    totalstatus=questions.length+1;
}, 4000);
while (totalstatus<questions.length) {
    for (var x=0;x<questions.length;x++) {
        if (questions[x].status===0) {
          if (board[x]=="question") {
            var answer=prompt(questions[x].question).toLowerCase();
            if (answer==questions[x].answer) {
                alert("Respuesta correcta!");
                puntuacion+=1;
                questions[x].status=1;
                totalstatus+=1;
            }
            else if (answer=="pasapalabra") {

            }
            else if (answer=="end") {
                totalstatus=questions.length+1;
                break;
            }
            else {
                alert("Incorrecto!");
                questions[x].status=1;
                totalstatus+=1;
          }
            }
            else {
              var answer1=prompt(questions[x].question1).toLowerCase();
            if (answer1==questions[x].answer1) {
                alert("Respuesta correcta!");
                puntuacion+=1;
                questions[x].status=1;
                totalstatus+=1;
            }
            else if (answer1=="pasapalabra") {

            }
            else if (answer1=="end") {
                totalstatus=questions.length+1;
                break;
            }
            else {
                alert("Incorrecto!");
                questions[x].status=1;
                totalstatus+=1;
          }
            }
        }
    }
}
alert("Fin del juego! Tu puntuación total es de "+puntuacion+" puntos!");

if (totalstatus==questions.length) {
  ranking.push({jugador: playername, puntuacion: puntuacion});
}
console.log(ranking.sort(compare));
}



pasapalabra();

Answer

The problem is that the execution of setTimeout and setTimeout’s callback in particular in pasapalabra is delayed by the prompt and alert calls. Those calls are synchronous, so they are waiting for the user’s action before the rest of function is executed. As you probably know, asynchronous code runs after the synchronous one (put very simply), and therefore because you fire just too many alerts and prompts from the beginning, the callback ending the game gets the chance to run much later after the user gets rid of all the “synchronous” dialogs.

So first of all you might consider running that setTimeout first in the “main” function, secondly it would be good to get rid of so many alerts and prompts and create some UI instead, so that the execution is not blocked and the dialogs don’t stack so much. The dialogs are also limited in that there is just one displayed at a time.