Entendendo o setTimeout e o setInterval do Javascript

Vou esclarecer hoje as dúvidas sobre as funcoes setTimeout e setInterval do javascript.

Com a função setTimeout, você define um tempo para que o javascript execute uma função.
Os parametros da função setTimeout( função , tempo ):
função: Função que você quer executar.
tempo: quanto tempo depois que rodar o script você quer que ela seja executada, em milisegundos.

Exemplo 1:

<html>
	<head>
		<title>Emerson Carvalho</title>
		<script type="text/javascript">
			function displayName()
			{
				document.getElementById('feedback').innerHTML = 'Emerson Carvalho';
			}

			//Executar a função displayName após 2 segundos.
			setTimeout('displayName()', 2000);
		</script>
	</head>
	<body>
		<span id="feedback"></span>
	</body>
</html>

Para passar parametros na função que será chamada pelo setTimeout você pode fazer como no exemplo abaixo:
Exemplo 2:

<html>
	<head>
		<title>Emerson Carvalho</title>
		<script type="text/javascript">
			function displayName( name )
			{
				document.getElementById('feedback').innerHTML = name;
			}

			//Passando uma string como parametro.
			setTimeout('displayName("Emerson Carvalho")', 2000);
		</script>
	</head>
	<body>
		<span id="feedback"></span>
	</body>
</html>

Exemplo 3:

<html>
	<head>
		<title>Emerson Carvalho</title>
		<script type="text/javascript">
			function displayName( name , site )
			{
				document.getElementById('feedback').innerHTML =  name + ' ' + site;
			}

			//Passando variaveis
			var nome = 'Emerson Carvalho';
			var url = 'http://www.emersoncarvalho.com';
			setTimeout( function(){ 
				displayName(nome, url);
			}, 2000);
		</script>
	</head>
	<body>
		<span id="feedback"></span>
	</body>
</html>

A função setInterval tem um comportamento diferente, com ela você irá definir um intervalo para que uma função seja executada constantemente.
Os parametros da função setInterval( função , tempo ):
função: Função que você quer executar.
tempo: de quanto em quanto tempo essa função será executada (em milisegundos).

Exemplo 4:

<html>
	<head>
		<title>Emerson Carvalho</title>
		<script type="text/javascript">
			function displayName()
			{
				document.getElementById('feedback').innerHTML += 'Emerson Carvalho <br/>';
			}
			//Repetir a função a cada 1 segundo.
			setInterval('displayName', 1000);
		</script>
	</head>
	<body>
		<span id="feedback"></span>
	</body>
</html>

Para passar variaveis você pode seguir o mesmo padrão do setTimeout();

Exemplo 5:

<html>
	<head>
		<title>Emerson Carvalho</title>
		<script type="text/javascript">
			function displayName( name, site )
			{
				document.getElementById('feedback').innerHTML +=  name + ' '+ site + '<br/>';
			}
			// Passando parametros para a função.
			var nome = 'Emerson Carvalho';
			var url  = 'http://www.emersoncarvalho.com';
			setInterval(function(){
				displayName( nome, url);
			}, 1000);
		</script>
	</head>
	<body>
		<span id="feedback"></span>
	</body>
</html>

Para parar a execução do setInterval, você deve usar a função clearInterval() conforme mostra o exemplo abaixo:

Exemplo 6:

<html>
	<head>
		<title>Emerson Carvalho</title>
		<script type="text/javascript">
			function displayName( name, site )
			{
				document.getElementById('feedback').innerHTML +=  name + ' '+ site + '<br/>';
			}
			var nome = 'Emerson Carvalho';
			var url  = 'http://www.emersoncarvalho.com';
			var intervalo = setInterval(function(){
				displayName( nome, url);
			}, 1000);
			clearInterval(intervalo);
		</script>
	</head>
	<body>
		<span id="feedback"></span>
	</body>
</html>

Faça o download dos exemplos

Obrigado.

  • Daniel Licio

    Muito bom. Essas funções são sempre úteis.

  • http://www.facebook.com/fabiano.nalin Fabiano Nalin

    Parabéns, ótimo artigo.

  • junior

    otimo exemplo

  • junior

    será que tem como você deixar um pouco mais claro seu exemplo?

  • Anônimo

    Qual sua dúvida Junior?

  • http://brunocastro.me Bruno Castro

    Eu aqui apanhando do canvas e tenho minhas dúvidas esclarecidas por Broguildo. Abraço cidadão! E obrigado por esclarecer.