Temporizador en ciclo

isabelramirezmontoya · #1 (**permalink**) 13/12/2012, 10:44

Chicos me dan una mano por favor

Necesito que en pantalla aparezcan una secuencia de numeros de 1 a 5, necesito que entre la aparicion de cada numero transcura un tiempo determinado 1,2,3,.. segundos.

No logro que me funcione, siempre aparecen simultanemanete todos.

Tengo el siguiente codigo:

Código HTML:

Ver original<html>
 
<head>
 
</head>
 
<body>
 
<script type="text/javascript">
 
var i=0;
 
while (i<=5) {
 
document.write("El número es: " + i);
document.write("<br />");
i=i+1;
 
setTimeout("", 1000);
 
}
 
</script>
 
<br>
 
</body>
</html>

Gracias

David · #2 (**permalink**) 13/12/2012, 11:04

setTimeout() no para la ejecución de código, lo que hace es evaluar el código especificado en el primer parámetro luego de transcurrido el tiempo especificado en el segundo parámetro.

Puedes leer esto: https://developer.mozilla.org/es/doc...dow.setTimeout
Luego nos comentas si tienes dudas.

isabelramirezmontoya · #3 (**permalink**) 13/12/2012, 13:58

David, estuve leyendo tu enlace, segun la lectura estoy empleando mal la funcion setTimeout .

En en nuevo script cambie las cosas un poco y use una funcion sleep() para retrazar el proceso, sin embargo no me trabaja bien y me salen errores de ejecucion del script.

Alguna sugerencia

Código HTML:

Ver original<html>
 
<head>
 
<script type="text/javascript">
 
function sleep(segundos)
    {
        var dt = new Date();
        dt.setTime(dt.getTime() + segundos);
        while (new Date().getTime() < dt.getTime());
    }
 
 
 
function inicio() {
 
var i=0;
 
while (i<=5)
{
document.write("El número es: " + i);
document.write("<br />");
i=i+1;
 
sleep(4000);
 
}
}
 
</script>
 
</head>
 
<body>
 
<a href="javascript:inicio()">Inicio</a>
 
</body>
</html>

Gracias

IsaBelM · #4 (**permalink**) 13/12/2012, 16:23

puedes emular setInterval() pero con setTimeout(). un galimatias, verdad?? revisa el último ejemplo

isabelramirezmontoya · #5 (**permalink**) 18/12/2012, 07:22

IsabelM, David, estuve revisando las funciones setInterval() y setTimeout(), con todo respeto creo que no es practico utilizarlas en mi script.

En mi script yo cree una funcion sleep() para hacer el temporizador o relay, pero no me funciona como deberia. Me prodrian decir que tengo mal en mi script por favor.

Actualmente el script funciona, pero no como debe ser, genera el siguiente mensaje ("Un script de esta página puede estar ocupado, o puede haber dejado de responder. Puede detener el script, o puede continuar para ver si el script finaliza") y se queda bloqueado

Mi script es el siguiente:

Código HTML:

Ver original<html>
 
<head>
 
<script type="text/javascript">
 
function sleep(segundos)
    {
        var dt = new Date();
        dt.setTime(dt.getTime() + segundos);
        while (new Date().getTime() < dt.getTime());
    }
 
 
 
function inicio() {
 
var i=0;
 
while (i<=5)
{
document.write("El número es: " + i);
document.write("<br />");
i=i+1;
 
sleep(4000);
 
}
}
 
</script>
 
</head>
 
<body>
 
<a href="javascript:inicio()">Inicio</a>
 
</body>
</html>

David · #6 (**permalink**) 18/12/2012, 07:29

¿Por qué opinas que no es práctico hacerlo? De la forma en que lo estás haciendo tendrás ese problema, el while sigue ejecutándose todo el tiempo de espera y hará que el navegador intente parar el script.

isabelramirezmontoya · #7 (**permalink**) 18/12/2012, 07:56

David, abusando de mi ignorancia, pienso que no es practico usar estas funciones por la forma como se invocan

La funcion setTimeout() ejecuta una funcion despues de un tiempo y yo necesito algo diferente. Una funcion que detenga el script un tiempo y que luego siga corriendo.

Con lo del WHILE me quede preocupado, ¿No se supone que el javascript corre del lado del usuario?

David, lo que acabo de decir es lo que entiendo, si dije muchas tonterias disculpa mi ignorancia.

David · #8 (**permalink**) 18/12/2012, 08:29

Como tal, no existe en Javascript una función que detenga el script por un tiempo.

Sí, se ejecuta del lado del usuario, pero el navegador gasta recursos ejecutando ese while y cuando ve que tarda más tiempo del que debería mostrará el mensaje de detenerlo, a eso me refería.

Puede parecer complicado de escribir la llamada, pero no lo es tanto:

Código Javascript:

Ver originalfunction inicio() {
    function escribir(i) {
        document.write("El número es: " + i);
        document.write("<br />");
        i++;
        if (i <= 5) {
            setTimeout(function() {
                escribir(i);
            }, 1000);
        }
    }
    
    setTimeout(function() { escribir(0); }, 1000);
}

rosonator · #9 (**permalink**) 18/12/2012, 08:46

Mira qué suerte, acabo de hacer algo semejante, n este caso un contador de segundos desde un punto de inicio:

Código:

var tiempoInicio;
var segundos = 0;

function inicioTiempo(){ 
  var tiempo = new Date();
  tiempoInicio = tiempo.getTime();			     
  print();
} //INICIOTIEMPO 

run () {
  tiempoActual=new Date();
  diferenciaDate = tiempoActual.getTime() - tiempoInicio;
  segundos = Math.floor(diferenciaDate /1000);

  setTimeout('print',20);

} //RUN

print () {
  ctx.fillText("Segundos: "+ segundos,0,20);
  run();
} //PRINT

Lo explico:

1º En una función inicial que solo se ejecuta 1 vez por cuenta cargas la fecha actual y la conviertes en milisegundos.

2º En una función recursiva coges otra vez la fecha actual, la conviertes de nuevo a ms. y la comparas con la fecha inicial que guardas en una variable pública.

3º En esa misma función conviertes el tiempo resultado de la operación anterior a segundos dividiendo entre 1000 y lo redondeas a la baja para tener los segundos transcurridos como resultado.

4º Haces con tus segundos lo que te salga del cucumber.

¡Un saludo!