[Resolvido] setInterval

[Daniel Carloni_165776 0]

Oi, teste você mesmo e me explique o que está errado

 

<script type="text/javascript">

function cima(){
var end = 50;
       var objTarget = document.getElementById('panel');    
       if(parseInt(objTarget.style.marginTop.replace("px","")) > end){
               objTarget.style.marginTop = (parseInt(objTarget.style.marginTop.replace("px","")) + eval(-1)) + 'px';

			 if(parseInt(objTarget.style.marginTop.replace("px","")) == end){
				//alert('igualcima');
				clearInterval("time");
				 document.getElementById('bordaBox').style.display = 'block';
			 }else{

		time = setInterval("cima()", 1);    
			 }
	}
}

function baixo(){
var end = 200;
       var objTarget = document.getElementById('panel');    
       if(parseInt(objTarget.style.marginTop.replace("px","")) < end){
               objTarget.style.marginTop = (parseInt(objTarget.style.marginTop.replace("px","")) + eval(+1)) + 'px';

			 if(parseInt(objTarget.style.marginTop.replace("px","")) == end){
				clearInterval(time_baixo);
				//alert('igualbaixo');
			document.getElementById('bordaBox').style.display = 'none';	
			 }else{

			 time_baixo = setInterval("baixo()", 1);    
			 }}
}

function box(){
input = document.getElementById('inputBox').value;	
if (input != "" & input != "undefined" & input != "null"){
cima();
}
else{
baixo();
}
}
</script>

<div id="panel"  style="margin:200px">
     <form name="form" method="post" action="action">
        <input type="text" id="inputBox"  onkeyup="box();">
     </form>


<div id="bordaBox" class="bordaBox" style="padding-left:62px; display:none" >
oi...
</div>
</div>

 

o objetivo é subir e descer o elemento quando tiver ou nao tiver valor no campo, com setInterval não funciona e eu fis o clear dele no lugar certo, se alterar o setInterval pelo setTimeout funciona, mais ai demora 1 segundo para subir e descer, demora muito tem que ser mais rapido, com setInterval é mais rapido mais não funciona direito... oque está errado ?

[Francis Schiavo 1]

O uso de setInterval está errado porque você está chamando recursivamente a função que cria o intervalo. Dessa forma cada vez que o intervalo executa a função um novo intervalo é criado.

[Daniel Carloni_165776 0]

criei uma script simples para tentar entender mais não estou conseguindo veja:

 

<div id="move" >
<center> Olá </center>
</div>
<script>
i=0;
function move(){

if(i == 300){
alert('stop');
clearInterval(time);
}else
{
i++
document.getElementById('move').style.margin = i;
var time = setInterval("move()", 100);
}
}

move();
</script>

 

quando exibir o alerta era para parar, porque o clearInterval não funciona ?

[William Bruno 1501]

pq o escopo está errado.

 

e se você quer exibir uma unica vez, deveria usar setTimeout() e não setInterval()

[Daniel Carloni_165776 0]

não sei porque usando setTimeout colocando tempo de 1 miséimo demora como se fosse um segundo, acho que é por causa do tempo de correr a função até chamar denovo. mesmo em um script simples com setInterval é mais rápido...

 

você disse que o escopo tá errado, como assim ?

vi um tópico semelhante onde foi preciso acrescentar variavel _global

para o clearInterval funcionar, nunca ouvi tinha visto isso e aqui não funcionou também

 

como assim escopo ?

[William Bruno 1501]

Ok, como seria o seu script correto:

<div id="move" >
<center> Olá </center>
</div>

<script type="text/javascript">
var time;
var i=0;
function mover()
{
if(i == 300)
{
	alert('stop');
	window.clearInterval( time );
}
else
{
	i++
	document.getElementById('move').style.margin = i;
}
}
time = window.setInterval(mover, 100);
</script>

 

como ele ficaria com setTimeout:

<div id="move" >
<center> Olá </center>
</div>

<script type="text/javascript">
var i=0;
function mover()
{
if(i == 300)
{
	alert('stop');
}
else
{
	i++
	document.getElementById('move').style.margin = i;
	window.setTimeout(mover, 100);
}
}
window.setTimeout(mover, 100);
</script>

coloquei um do lado do outro, e os 2 tiveram o mesmo comportamento.

 

Note que um dos seus erros, é que você estava fazendo setInterval recursivamente.

Eu fiz isso para o setTimeout, pq preciso disso, para executa-lo varias vezes seguidas, mas o setInterval já faz isso sozinho.

[Daniel Carloni_165776 0]

por causa da declaração no inicio do script não estava parando o clearInterva fala sério,

deveria ter algum margem de error do dreamweaver rsrs... verdade o tempo é igual tanto para um tanto para outro e mesmo assim tá lento.. as vez eu falo coisa sem nexo ae tá certinho para aumentar a velocidade é só alterar o i++

 

tipo, i = eval(i+2);

 

fica mais rápido, visto que não tem diferença vou usar o setTimeout agora, vlw bruno ;)