Inércia Sensorial

setTimeout() e clearTimeout()

Comments 12 dAmerica/Los_Angeles December, 2005 sob Javascript.
Tags:

Para controlar quando uma função Javascript será executada, use setTimeout(), que aceita dois argumentos. O primeiro argumento é a nome da função, e o segundo, em quanto tempo a função será executada (em milisegundos).

setTimeout

Para mudar o conteúdo de um div após dois segundos que o usuário passou o mouse em um link:

PLAIN TEXT

HTML:

<html>
<head>
<title>Dois segundos antes do aviso</title>
<script type="text/javascript">
function atualiza()
{
div = document.getElementById('aviso');
div.innerHTML = 'Fazem dois segundos que você passou o mouse no link';
}
function avisoDemorado()
{
setTimeout("atualiza()", 2000);
}
</script>
</head>
<body>
<a href="#" onmouseover="avisoDemorado();">passe o mouse</a>
<br />
<br />
<div id="aviso"></div>
</body>
</html>

Se você passar o mouse no link, remover o ponteiro de cima dele, e voltá-lo, ainda assim a função será executada. Mas existe um jeito de cancelá-la...

clearTimeout

Suponhamos que você queira cancelar a execução da função antes dos dois segundos. Para isso, você pode usar a função clearTimeout(). Ela aceita um argumento, que é qual tempo iniciado pelo setTimeout() devemos cancelar.

PLAIN TEXT

HTML:

<html>
<head>
<title>Dois segundos antes do aviso com cancelamento</title>
<script type="text/javascript">
function atualiza()
{
div = document.getElementById('aviso');
div.innerHTML = 'Fazem dois segundos que você passou o mouse no link';
}
function avisoDemorado()
{
if (typeof(tempo) != 'undefined') {
clearTimeout(tempo);
}
tempo = setTimeout("atualiza()", 2000);
}
</script>
</head>
<body>
<a href="#" onmouseover="avisoDemorado();">passe o mouse</a>
<br />
<br />
<div id="aviso"></div>
</body>
</html>

Agora, se você voltar o mouse em cima do link antes dos dois segundos, o div não será atualizado. Deixe o ponteiro fora por um tempo maior que esse, e a mensagem aparecerá.