Inércia Sensorial

12 de December de 2005

setTimeout() e clearTimeout()

Filed under: Javascript — inerte @ 09:46

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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á.

1 Comment »

  1. esse script resplve muitos problemas com auto complete
    parabéns vlw

    Comment by Rodrigo — 10 de April de 2009 @ 18:59

RSS feed for comments on this post. TrackBack URL

Leave a comment

Powered by WordPress