segunda-feira, 26 de novembro de 2012

Uso do setTimeout em javascript - I

Comandos de sincronização de tempo são difíceis de se compreender. E com os péssimos exemplos da Internet, a coisa piora. Ninguém explica direito como devem ser usados. Em jQuery o método animate facilita muito as coisas. Escrevemos este post para quem quer ENTENDER REALMENTE o que vem a ser o timeout.

O melhor termo em português para "Timeout" é "O TEMPO ESTOUROU".

Veja o código a seguir:


<html>
<head>
<style>
P.pg1 {
position:absolute;
left: 0; top: 100;
border: solid 1 red;
background-color: salmon;
padding: 6px; 
width: 100px;
}
</style>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
var tempo = 100;
function movePg(){
tempo--;
if( tempo > 0 ){
$("#p01").css('top',tempo);
setTimeout("movePg()",300);
}
}
$(document).ready(function(){
setTimeout("movePg()",300);
});
</script>
</head>
<body>
<p id="p01" class="pg1">Eu sou um parágrafo.</p>
</body>
</html>

Repare que A CADA CHAMADA DA FUNÇÃO QUE TRATA O TIMEOUT, é preciso REPETIR A CHAMADA à função. Ou seja, a cada ocorrência de TIMEOUT, a função é chamada UMA SÓ VEZ, por isto é preciso CHAMÁ-LA NOVAMENTE.

Em outras palavras: setTimeout NÃO ESTABELECE UM LOOP de chamada.

Os exemplos e explicações que temos achado na Internet não deixam isto claro.

Este exemplo faz o seguinte:


A cada chamada da função movePg, provocada pela instrução setTimeout, o estilo "top" é alterado.




Nenhum comentário:

Postar um comentário