Autor: Rodrigo Gonçalves
- Tema: Função setInterval() e setTimeout();
- Dificuldade: Básico em Action Script;
- Disponível: AS 1.0, AS 2.0 e AS 3.0;
- Recomendações: Para bom aproveitamento deste artigo, é interessante ter uma noção básica em lógica de programação.
Situação:
Você precisa chamar/executar uma determinada função em um tempo específico.
Solução:
Para resolver este caso, podemos utilizar as funções setInterval() e setTimeout().
Estás funções/métodos, são muito úteis para chamarem uma determinada função num determinado tempo específico. Podemos fazer quaisquer funções e chama-la somente quando precisarmos.
Índice:
1. Sintaxes do setInterval() e setTimeout();
2. Qual a diferença entre estas funções setInterval() e setTimeout() ?
3. SetInterval() e clearInterval();
4. SetTimeout() e clearTimeout();
5. SetInterval e SetTimeout utilizando argumentos/parâmetros na função.
1. Sintaxes do setInterval() e setTimeout():
setInterval(functionReference:Function, delay:Number [,args:Object]); clearInterval(nome_do_intervalo); setTimeout(functionReference:Function, delay:Number [,args:Object]) clearTimeout(nome_do_intervalo);
Parâmetros de setInterval() e setTimeout():
setInterval() ou setTimeout() possuem 3 parâmentros, sendo eles:
functionReference:Object -
É o nome de referência da função que será executada. Não deve incluir parenteses ou aspas no nome, também não deve especificar parâmetros como Ex.:
Utilize apenas um nome de referência: nomeFuncao, e não utilize nomeFuncao() ou nomeFuncao(parametros).
delay:Number -
É o tempo em milesegundos que a função aguarda pra ser executada/chamada.
args:Object -
É opcional caso sua função exigir inserir parâmetros você deverá utilizar esse 3º parâmetro. Poderá inserir nenhuma ou vários argumentos, separando seus argumentos por vírgulas de acordo com a necessidade de sua função.
É interessante verificar na documentação em (tecla F1) sobre estas funções/métodos para maiores detalhes.
2. Qual a diferença entre estas funções setInterval() e setTimeout() ?
As duas funções tem praticamente a mesma sintaxe. Porém, tem diferença em sua execução.
Enquanto a função setInterval() chama/define "intervalos infinitos", e necessita obrigatoriamente chamar uma função clearInterval() para limpar/cancelar o intervalo executado caso necessário e evitar um "erro" de tempo na sua aplicação. A setTimeout() chama a função apenas "uma única vez", e em seguida o intervalo é "apagado" automaticamente, sem ter necessidade de utilizar clearTimeout() para não gerar um "loop".
Obs.:
Cada função pode necessitar ou não limpar o intervalo, isso pode depender da função que você quer utilizar ou aplicação.
Aqui mostraremos como pode ser útil utilizar e "abusar" destas funções/métodos em sua aplicação seja as mais simples até as mais complexas.
Explicações feitas. Vamos ao que interessa. ActionScript!
Vamos entender na prática como utilizar, aqui darei o exemplo com setInterval() e setTimeout().
3. SetInterval() e clearInterval():
Abra painel de Actions(F9) e digite:
1 2 3 | function pausa() { trace("aqui coloco minha mensagem"); } |
Se você testar o filme "Control > Test Movie" ou (Ctrl + Enter) verá que nada acontece. Isso mesmo que já definida uma função, ela só é executada quando a chamamos.
Na linha seguinte digite:
4 | pausa(); |
Agora teste o filme. Você percebe que aparece na caixa de saída (Output) a mensagem que definimos com a função/método trace(); Está função pode ser quaisquer que queira definir. Usamos o trace() neste exemplo apenas para entendermos melhor o funcionamento de setInterval() e setTimeout();
Certo. Agora vamos "brincar" e usar a função SetInterval() para chamar esta função "pausa" depois de um intervalo de 2 segundos, o qual será usado em milesegundos (2000 ms).
Altere a linha:
4 | pausa(); |
por:
4 | setInterval(pausa, 2000); |
Seu código todo deve ter ficado assim:
1 2 3 4 | function pausa() { trace("aqui coloco minha mensagem"); } setInterval(pausa, 2000); |
Agora teste o filme.
Repare que a caixa de saída só aparece a mensagem depois de 2 segundos. Você pode alterar este tempo para quanto quiser, mas deve ser contagem em milesegundos.
Mas repare também que, após mais 2 segundos fica repetindo esta função "pausa".
Lembra o setInterval "define intervalos infinitos". Precisamos cancelá-lo/limpá-lo para não haver execução da função repetidas vezes dentro do intervalo definido. A não ser que seja esta sua intenção.
Caso queira chamar apenas uma vez a função depois de uma tempo.
Pra isso utilizamos a função clearInterval() que irá limpar a função logo após executada. Ou seja, quero executar a função depois de um tempo específico mas apenas uma vez. Veremos a seguir.
Apague o código anterior e digite:
1 2 3 4 5 | function pausa() { trace("aqui coloco minha mensagem"); clearInterval(limpa); } var limpa = setInterval(pausa, 2000); |
Explicando código:
Primeiro criamos uma função denominada de "pausa", nesta função apenas executa uma mensagem na caixa de saída(Output) utilizando a função trace().
Em seguida ainda dentro da função "pausa" logo após a linha trace(), chamamos a função clearInterval(), cujo id é um nome de variável que definimos como "limpa". Esta variável recebe a função setInterval(pausa, 2000) e será cancelada pela função clearInterval() logo após executada. Isso fará com que o intervalo execute apenas uma vez.
Considerações:
Quando declaramos o setInterval(), devemos chamar uma nova função, a clearInterval() caso queira executar apenas uma vez. Do contrário irá executar infinitamente a função dentro do intervalo estipulado em milesegundos.
Como o seu próprio nome já diz. clearInterval(), apaga a função setInterval()
logo após executada, evitando um erro de intervalo. Dependendo da aplicação pode gerar um erro de tempo no seu filme e não funcionar da maneira esperada. Isto pode ser incomodo e impreciso dependendo da sua aplicação.
Por isso, ao declarar setInterval(), caso queira utilizar apenas uma vez a função, deverá utilizar a função clearInterval();
Podemos também utilizar uma função setTimeout() veremos à seguir.
4. SetTimeout() e clearTimeout():
Vejamos agora utilizando setTimeout(). Reparem que tem exatamente a mesma sintaxe e lógica de setInterval(). A diferença que o setTimeout() executa apenas uma vez a função sem necessidade de utilizar clearTimeout() para este exemplo. Mas nada impede de utilizar o clearTimeout()
1 2 3 4 | function pausa() { trace("aqui coloco minha mensagem"); } setTimeout(pausa, 2000); |
Obs:
A função setTimeout() também existe um método que cancela/limpa uma chamada específica. Pra isto, utilizamos a clearTimeout(), tem a mesma sintaxe da clearInterval(). Depende mesmo da sua aplicação. Neste exemplo que foi passado de setTimeout() não há necessidade de utilizar clearTimeout(), pois a própria função setTimeout() é aplicada uma única vez e limpa automaticamente após executada. Mas em alguns casos dependendo da sua função ou intenção pode ser necessário aplicar clearTimeout();
5. SetInterval e SetTimeout utilizando argumentos/parâmetros na função.
Caso sua função utilize parâmetros, você deverá declarar o 3º parâmetro do setInterval ou setTimeout. Lembra da sintaxe? o setInterval ou setTimeout tem um 3º parâmetro, a qual é opcional. Ou seja, este 3º parametro de setInterval/setTimeout, são parâmetros(ou argumentos) utilizados na sua função. Por isso ele é opcional, no caso só deve ser inserido, caso a sua função realmente necessitar a presença de parâmetros. Vejamos um exemplo.
Temos uma função simples de somar números.
1 2 3 4 5 | function somar(numero1:Number, numero2:Number){ var soma:Number; soma = numero1 + numero2; trace("A soma de " + numero1 + " + "+ numero2 + " é = " + soma); } |
Para chamar esta função solicita 2 parâmetros/argumentos do tipo Numéricos.
Na linha seguinte digite:
6 | somar(2, 3); |
Isso chamaria a função somar() mostrando o resultado da soma 2 + 3 na caixa de saída(Output).
Agora com uso de setTimeout(ou setInterval), apague a linha 6, e digite:
6 | setTimeout(somar, 2000, 2, 3); |
Isso chama/executa a função somar() apenas depois do intervalo de 2000 milessegundos(2 segundos).
Repare também que no 3º parâmetro. de setTimeout inseri 2 parâmetros que são exigidos em minha função somar(). No caso poderia ter quantos parâmetros que sua função exigir.
Simples. Não é?
Para aplicar com uso de setInterval() é a mesma sintaxe utilizada em setTimeout().
Considerações finais:
Vimos como utilizar as funções setInterval() e setTimeout() e as suas diferenças entre cada função.
A utilização de cada função vai depender da sua necessidade e aplicação no seu projeto, desde os mais simples aos mais complexos.
Poderá aplicar qualquer função que precise chamar em um tempo específico. Só usar sua imaginação! Deve ficar atento também para a aplicação que pretende fazer.
Com o tempo você vai perceber a necessidade em utilizar essas funções nos seus projetos.
Obs:
Este métodos funcionam também na versão ActionsScript 3.0, mantendo a mesma lógica utilizada. Vale conferir F1(ajuda do Flash) sobre esse tema para ter maiores detalhes.
Abraços e até a próxima!
Rodrigo Gonçalves
Equipe Alvo Web
O Conteúdo do Alvo Web Developers está licenciada sob uma Creative Commons Atribuição-Uso Não-Comercial-Compartilhamento pela mesma Licença 2.5 Brasil License.
20 respostas ↓
1 Adriano Rosa // Dez 27, 2007 at 3:11 pm
Legal, muito útil, valew a dica!
Parabéns
Abço
2 joao // Jan 28, 2008 at 8:11 am
he muito simples.. ae um exemplo q eu usei
function pausa() {
play();
}
var parada = setTimeout(pausa,3000);
e usei assim no botao q limpa ..
on (rollOver) {
clearTimeout(parada);
//stop();
gotoAndStop(6);
}
on (rollOut) {
gotoAndPlay(8);
}
valew muito obrigado.
3 André // Out 24, 2008 at 10:53 am
aopa beleza?
e se eu precisasse atraves do setInterval carregasse a imagem1, dai depois de um tempo carregasse outra imagem2, e depois a imagem1 de novo, fazendo um looping.
eu tentei usar duas variaveis com o setinterval, cada um para cada imagem, mais depois de carregar a segunda imagem ele nao da o loop, fica na segunda imagem,
oque eu teria q fazer para dar o loop?
valeeeu
4 Rodrigo // Out 24, 2008 at 11:40 am
André tudo bem?
Tenha isso, faça um teste, crie uma pasta pra salvar seus arquivos de imagens e o arquivo Flash.
1- Fiz 2 imagens jpg e renomeie como:
imagem1.jpg
imagem2.jpg
Obs: nesse exemplo deixei as imagens na mesma pasta do arquivo Flash.
2- Depois, crie um novo arquivo flash e salve na mesma pasta das imagens.
3- No 1º frame da 1º camada, inserir o código:
É apenas uma ideía, mas pode melhorar isso.
No lugar do loadMovie, pode usar a classe MovieClipLoader pra obter mais controle das imagens carregadas.
Abraços.
5 André // Out 24, 2008 at 1:27 pm
a cara legal!
funcionou certinho. parabéns!
só uma coisinha, nesse flash onde eu estou carregando as imagens tem uma guia, e queria que por exemplo quando estivesse na imagem2 o numero 2 na guia ficasse com um alpha maior que os outros numeros.
pensei em colocar algo assim:
if (contador=1){
botao1.aalpha = 100;
botao2.aalpha = 60;
}
if (contador=2){
botao1.aalpha = 60;
botao2.aalpha = 100;
}
mas quando eu coloquei dentro da função carregaImg parece que a confundiu tudo na hora que eu testei.
será q tem um jeito de fazer isso?
valeeeu
abraaços
6 Marcelo Ronkenoli // Jul 2, 2009 at 9:56 pm
Muito legal, parabéns me ajudou muito.
7 Luiz // Set 2, 2009 at 4:25 pm
Gostaria de saber se tem como eu fazer uma pausa na execução do Action Script.
Por exemplo um arquivo que contenha apenas um frame com o seguinte código:
trace(”Inicio”);
sleep(2000);
//A palavra “Fim” deve aparecer apenas dois segundos após a reprodução do filme.
trace(”Fim”);
Gostaria de saber como posso fazer isso?
8 Rodrigo // Set 3, 2009 at 7:11 am
blz Luiz?
Tem como sim. É só declarar sua funções pra depois você conseguir chama/executa elas quando quiser.
Ex:
Abraço.
9 MarcelO // Set 29, 2009 at 2:40 pm
Boa tarde! estou tendo uma dificuldade no seguinte código:
var i:Number = 1;
function carrega()
{
if(i>19)
i=1;
else{
loadMovie(”imagens/”+i+”.jpg”,”alvo10″);
i++;
}
}
function teste(){
carrega();
if(alvo10.getBytesLoaded == alvo10.getBytesTotal)
carrega();
else
trace(”Carregando”);
setInterval(carrega,2000);
}
teste();
Tem uma função para carregar a imagem, o problema é que se o tanto de bytes lidos for igual ao bytes total ele não espera os segundos do setInterval e carrega a próxima, aí fica rápida a troca de imagens…
Obrigado
10 Rodrigo // Out 1, 2009 at 4:31 pm
blz Marcelo?
Ao invés de usar a função loadMovie, use a classe MovieClipLoader, com ela você tem maior controle do carregamento do conteúdo.
No código abaixo, insira no primeiro frame.
Ter uma pasta com nome “imagens” no mesmo lugar do seu arquivo .Fla, e também 3 imagens com nomes: 1.jpg, 2.jpg, 3.jpg
As configurações estão todas declaradas nas variáveis no topo, modifique conforme você precise.
O exemplo abaixo da pra melhorar, mas já é um começo.
Ex: AS2
Links pra referecias:
http://help.adobe.com/en_US/AS2LCR/Flash_10.0/help.html?content=00001377.html
http://imasters.uol.com.br/artigo/3593/moviecliploader_e_loadmovie
Abraço.
11 MarcelO // Out 4, 2009 at 2:15 pm
Cara!! Perfeito!!
Valeu mesmo, era o que eu queria!
Abraço
12 Macon // Out 30, 2009 at 11:59 am
Estou com um problema nesta função para fazer com que o setInterval páre após clique em um botão pause por exemplo.
Como funcionara neste sistema?
Pois eu tenho o play que inicia os slides de imagens e após determinado tempo com o setinterval ela passa para o próximo frame (outra imagem) até aí beeza.
Agora Quando clicasse no botão pause deveria parar a função setinterval e ficar no frae atual, isso que não estou conseguindo…
Saberia como fazer?
abraço
13 Rodrigo // Out 30, 2009 at 12:16 pm
Blz Macon?
Só usar o clearInterval pra “matar” o intervalo de continuar. Depois você chama novamente.
Código na timeline principal e botões na timeline principal.
Onde são pauseBtn e playBtn, são seu botões com nome de instâncias no stage.
Ex AS2:
Abraço.
14 Macon // Out 30, 2009 at 12:45 pm
Valeu Rodrigo, deu certo.
Eu até estava fazendo certo, o problema é que tinha uma váriavel pauseBtn.onRelease = function() {… que não deixava funcionar.
Obrigado.
15 Andre // Nov 16, 2009 at 12:51 pm
Rodrigo, boa tarde, cara dei uma boa lida no teu material, muito bom por sinal…!!! Estou usando o setTimeout na seguinte situação abaixo, funciona ok, só tem um problema, se por acaso eu avanço um frame ou retorno, ele inicia do ultimo intervalo além de começar de novo (o que está correto) porque isto acontece…? Quer dizer se por acaso eu avanço outra vez ele irá continuar do outro intervalo e iniciar de novo e assim por diante até que chega uma hora em que está tudo iniciando tudo fora de sincronia.
16 Rodrigo // Nov 16, 2009 at 1:28 pm
Valeu pela visita ao site André.
Pra isso você pode tentar resolver com clearInterval pra setInterval, ou clearTimeout pra setTimeout.
Isso basicamente “reinicia” o tempo. Sabendo disso, você executa ele dentro da sua função antes de começar uma tarefa.
Ex.
Terá que cadastrar uma variável pra receber esse valor do de setTimeout usado que vai retornar um numero, e depois conseguir apagar o setTimeout/intervalo pra reiniciar o valor sem “atropelar” outros intervalos que foram disparados antes.
AS2 ou AS3:
Help Flash clearInterval, mesma lógica pra clearTimeout.
http://help.adobe.com/en_US/AS2LCR/Flash_10.0/help.html?content=00000556.html
Abraço.
17 Andre // Nov 16, 2009 at 2:21 pm
Rodrigo, obrigado pela resposta logo em seguida…!! Fiz as variaves mas ainda assim os valores continuam sendo “atropelados”, não estou conseguindo entender parece para mim que esta tudo certo.
18 Andre // Nov 17, 2009 at 7:04 am
Será que tem um outro tipo de função que eu possa usar…?
19 Rodrigo // Nov 17, 2009 at 11:59 am
Até onde sei no momento, só existe setInterval ou setTimeout que são nativos pra AS2.
No AS3 você tem além dessas funções a classe Timer que funciona pro mesmo proposito, mas como é uma classe você tem teoricamente maior controle.
Na net talvez você ache classes feitas por terceiros pra controlar tempo e intervalos.
Tenta assim e veja se vai. Não testei, mas pode ser uma idéia:
Abraço.
20 Andre // Nov 17, 2009 at 1:18 pm
Não dá também que dificuldade, jurava que setTimeout iria funcionar é uma coisa tão simples de se entender…
Faça um comentário