Retardar codigo javascript

dvd181191 · #1 (**permalink**) 22/02/2013, 15:43

Buenas, espero que alguien pueda ayudarme

estoy intentando aprender algo de javascript y me ha surgido una duda que no he sido capaz de solucionar.

De javascript se poco por no decir nada, pero es casi igual que php por lo que me desenvuelvo bastante bien.

Bueno la idea es hacer un bucle que me mueva una capa 50 pixeles a la derecha. He probado con setInterval () y setTimeout () y no se porque no siguen el escript, es como que van a su pedo :)

Código:

<div id="capa"></div>

<script text="text/javascript">

	a = 10;
	
	var Capa = document.getElementById ("capa");
	
	for (a; a > 0; a--) {
		
		window.setTimeout (function () { Capa.innerHTML = a; },1000);
		
	}
	
</script>

este es un código muy basico con el que estoy enredando y la idea es generar un contador regresivo y que cada segundo me muestre en la capa el valor por el que va.

Con timeInterval () no es lo que busco.

Y si es posible, este codigo devera repetirse y cada vez que se repita retrasar todo el script que esta por encima.

No se como explicarlo, pero si alguien me pudiera ayudar se lo agradeceria

chuidiang · #2 (**permalink**) 22/02/2013, 16:34

Hola:

Estas lanzando 10 timeout seguidos que se ejecutarán los 10 seguidos dentro de 1000, así que imagino es que lo unico que has conseguido es que todo sea igual de rápido que antes, pero 1000 ms más tarde.

Necesitas setInterval(), pero no en un bucle.

Código java:

Ver originalvar miTimer = setInterval (funcion(){Capa.innerHTML=a; a++}, 1000) ;

Cuando quieras que pare, llama a clearInterval(miTimer)

Se bueno.

emprear · #3 (**permalink**) 22/02/2013, 21:04

Cita:

Iniciado por dvd181191

Buenas, espero que alguien pueda ayudarme

estoy intentando aprender algo de javascript y me ha surgido una duda que no he sido capaz de solucionar.

De javascript se poco por no decir nada, pero es casi igual que php por lo que me desenvuelvo bastante bien.

Bueno la idea es hacer un bucle que me mueva una capa 50 pixeles a la derecha. He probado con setInterval () y setTimeout () y no se porque no siguen el escript, es como que van a su pedo :)

Código:

<div id="capa"></div>

<script text="text/javascript">

	a = 10;
	
	var Capa = document.getElementById ("capa");
	
	for (a; a > 0; a--) {
		
		window.setTimeout (function () { Capa.innerHTML = a; },1000);
		
	}
	
</script>

este es un código muy basico con el que estoy enredando y la idea es generar un contador regresivo y que cada segundo me muestre en la capa el valor por el que va.

Con timeInterval () no es lo que busco.

Y si es posible, este codigo devera repetirse y cada vez que se repita retrasar todo el script que esta por encima.

No se como explicarlo, pero si alguien me pudiera ayudar se lo agradeceria

Bueno, lo de un contador regresivo más o menos se entiende, lo otro, para nada

Para clarificar (aunque ya es más cosa de que te pongas a leer los manuales)
setTimeout retrasa la ejecución n milisegundos
setInterval repite la ejecución cada n milisegundos
si llamás setTiemout dentro de la misma función, llamando a la misma función, también la repite

Ejemplos

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>timers</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<script type="text/javascript">
//<![CDATA[
var i = 10,i2=10,i3=10,t;
function cuenta_reg(){
var capa = document.getElementById('cuenta');
t= setTimeout(function() {
            capa.innerHTML = i;
            i--;
            cuenta_reg(i);
          if(i < 0){
            clearTimeout(t);
            } 
        }, 1000);
}
 
function cuenta_reg2(){
    var capa2 = document.getElementById('cuenta2');
    capa2.innerHTML = i2;
          if(i2 == 0){
            clearInterval(e);
            } 
            i2--;
}
 
function cuenta_reg3(){
    var capa3 = document.getElementById('cuenta3');
    capa3.innerHTML = i3;
           i3--;
          if(i3 < 0){
            i3 = 10;
            } 
}
 
window.onload= function(){
cuenta_reg();
var e = setInterval('cuenta_reg2()',1000);
var f = setInterval('cuenta_reg3()',1000);;
}
//]]>
</script>
</head>
<body>
<div id="cuenta"></div>
<div id="cuenta2"></div>
<div id="cuenta3"></div>
</body>
</html>

Saludos

dvd181191 · #4 (**permalink**) 25/02/2013, 13:42

muchas gracias por las respuestas :)