Javascript setInterval e Settimeout Methods explicou

JavaScript é uma linguagem de programação da Web de alto nível na qual todas as afirmações de código são executadas linha por linha. No entanto, suponha que você queira executar algum código ou função posteriormente (no futuro) e não imediatamente. Isso é chamado de agendar uma chamada em JavaScript e pode ser alcançado com os dois métodos internos; setTimeout () e setInterval ().

Este post discute o que setInterval () e setTimeout () Métodos internos estão em JavaScript. No entanto, antes de prosseguirmos, deve -se notar que esses dois métodos não fazem parte da especificação JavaScript e fazem parte da especificação padrão HTML, mas são suportados em todos os principais navegadores.

Qual é o método setTimeout ()?

O setTimeout () O método é usado para executar um código específico no futuro e não imediatamente chamando uma função de retorno de chamada após um intervalo de tempo específico. A função de retorno de chamada é definida como a função fornecida a outra função como um argumento e executada na função externa mais tarde.

Sintaxe do método setTimeout ()

O sintaxe de setTimeout () é dado abaixo:

Settimeout (CallBackFunc, milissegundos);

O primeiro argumento que damos ao setTimeout () O método é a função de retorno de chamada que é executada após os milissegundos fornecidos.

Exemplo
Vamos passar por um exemplo em que definiremos o setTimeout () Método em um botão e quando o usuário clicar nesse botão, as funções de retorno de chamada serão executadas após 2 segundos:

Tente

Na função de retorno de chamada, inicializamos um alerta que será exibido após dois segundos com a mensagem olá.

Qual é o método setInterval ()?

O setInterval () o método é o mesmo que setTimeout () Como também executa uma função de retorno de chamada após um horário específico, mas com a exceção de executar a função de retorno de chamada continuamente após esse intervalo específico de tempo.

Sintaxe do método setInterval ()

O sintaxe do setInterval () O método é o seguinte:

setInterval (myfunc, milissegundos);

Como setTimeout () O primeiro argumento é a função de retorno de chamada que será executada após o número especificado de milissegundos e a execução será repetida continuamente após esse horário específico.

Exemplo
Vamos passar por um exemplo em que mostraremos o tempo atual do sistema após cada 1 segundo.

const myfunc = () =>
const d = new Date ();
console.log (d.tolocaletimestring ());

setInterval (myfunc, 1000);

No código acima, criamos primeiro uma função na qual criamos uma nova data usando o Data Objeto e console registraram o tempo do sistema.

Depois de definir a função, usamos o setInterval () método, passou o nome da função e 1000 milissegundos, que é 1 segundo. Agora, a função será executada após cada 1 segundo e veremos o tempo do nosso sistema no registro do console após cada segundo:

Interrupção da execução de setTimeout () e setInterval ()

Se você não deseja a função de retorno de chamada de setInterval () ou setTimeout () Para executar mais, podemos usar os métodos de parada disponíveis no JavaScript para os dois.

método cleartimeout ()
Para parar a execução do setTimeout () função, podemos usar o ClearTimeout () método que levará uma variável/id que é retornada do setTimeout () método como argumento.

Exemplo
Neste exemplo, interromperemos a execução da função de volta definida com o método setTimeout ():

Tente
Parar

O código acima mostrado é uma forma estendida do exemplo setTimeout () mostrado anteriormente. Neste código, adicionamos outro botão com o nome de Parar e invocou a função STOP () sempre que um usuário clica no botão de parada. A função stop () tem clearTimeout () que possui uma variável t como argumento. A variável t é simplesmente um ID retornado da função setTimeout ().

Quando um usuário clica no Tentar botão depois depois de três segundos, vemos Olá no alerta como visto anteriormente. No entanto, se o usuário agora clicar no botão de parada antes de 3 segundos, a função de volta para o MyFunction não será invocada e, portanto, não veremos um alerta. Este fenômeno é mostrado abaixo:

Método ClearInterval ()
Da mesma forma, para interromper a execução do setInterval () função, podemos usar o ClearInterval () método que também levará a variável retornada do setInterval () como um argumento.

Exemplo

Vamos seguir um exemplo em que interromperemos a execução da função de retorno de chamada do setInterval () método.

Pare o tempo

No código acima, definimos um botão no HTML e depois inicializamos o evento OnClick neste botão. Quando o usuário clica no botão definido, o setInterval () Método vai parar de executar.

Quando clicamos no botão "Stop Time", o tempo do sistema parou de exibir em nosso log do console:

Conclusão

O setTimeout () e setInterval () Métodos Ambos agende uma chamada que deve executar uma função mais tarde após um número especificado de milissegundos com a exceção que setInterval () executa uma função continuamente após esse tempo específico, diferentemente setTimeout () método que executa uma função apenas uma vez após o tempo especificado.

Neste post, discutimos o que o setTimeout () e setInterval () o método é e vimos seus exemplos junto com as capturas de tela da saída. No final, também vimos como interromper a execução das funções de retorno de chamada associadas a setTimeout () e setInterval () métodos.