O que é SetInterval em JavaScript e como funciona?



JavaScript também permite a execução de funções e métodos com relação ao tempo. SetInterval em JavaScript é uma parte de eventos de temporização.

JavaScript é usado como uma linguagem de programação do lado do cliente, bem como uma linguagem de programação do lado do servidor. istofornece uma infinidade de métodos para várias funcionalidades a serem realizadas com facilidade. Isso é o que fez uma das linguagens de programação mais populares, além de estar sendo amplamente usada em vários tipos de desenvolvimento de produto.SetInterval em JavaScript é uma parte de eventos de temporização em JavaScript e aprenderemos sobre isso na seguinte sequência:

Eventos de tempo

JavaScript também permite a execução de funções bem como métodos em relação ao tempo e não ao tempo de execução do programa. Isso permite a execução das funções na hora especificada, independentemente da hora de execução do programa.





Os dois métodos principais para usar os eventos de temporização em JavaScript são:

  • setTimeout (função, milissegundo)



Esta função executa a função dentro da qual é passada como parâmetro apenas uma vez após o tempo especificado em milissegundos.

  • setInterval (função, milissegundo)

Esta função executa a função desde o tempo de execução e após cada intervalo de tempo atingido. Ele repete a execução da função em cada intervalo de tempo.



Agora vamos seguir em frente e ver como SetInterval em JavaScript funciona.

SetInterval em JavaScript

O primeiro parâmetro desta função é a função a ser executada e o segundo parâmetro indica o intervalo de tempo entre cada execução.

var myVar = setInterval (myTimer, 1000) function myTimer () {var d = new Date () document.getElementById ('demo'). innerHTML = d.toLocaleTimeString ()}

Aqui, document.getElementById obtém o elemento de que tem o id como “demo” e a função d.toLocaleTimeString () fornece a hora atual do sistema.

Portanto, isso está sendo repetido a cada 1000 milissegundos, o que equivale a 1 segundo. Assim, a função está sendo executada repetidamente a cada 1 segundo e, portanto, a hora está sendo atualizada a cada segundo.

Então, como paramos essa execução? Vamos descobrir!

o que é um array dinâmico

Como parar a execução?

Podemos parar a execução da função setInterval () com a ajuda de outra função chamada clearInterval ().clearInterval () usa a variável retornada da função setInterval ().

Por exemplo:

myVar = setInterval (função, milissegundos) clearInterval (myVar)

Abaixo está um exemplo que usa setInterval () e também clearInterval (). Isso inicia um relógio e fornece um botão para parar o tempo.

 

Abaixo está um relógio.

Pare o tempo

Clique no botão acima para parar o tempo.

var myVar = setInterval (myTimer, 1000) function myTimer () {var d = new Date () document.getElementById ('demo'). innerHTML = d.toLocaleTimeString ()}

Resultado:

Saída - setinterval em javascript - edureka

Mais alguns exemplos com setInterval () e clearInterval ().

Criação de uma barra de progresso dinâmica

#myProgress {largura: 100% altura: 30px posição: cor de fundo relativa: #ddd} #myBar {cor de fundo: # 4CAF50 largura: 10px altura: 30px posição: absoluto} 
Click Me function move () {var elem = document.getElementById ('myBar') var width = 0 var id = setInterval (frame, 10) function frame () {if (width == 100) {clearInterval (id)} else {largura ++ elem.style.width = largura + '%'}}}

Resultado:

A saída inicial

Saída após o clique no botão que diz “Click Me”.

Alternar entre dois fundos

Parar de alternar var myVar = setInterval (setColor, 300) function setColor () {var x = document.body x.style.backgroundColor = x.style.backgroundColor == 'yellow'? 'rosa': 'amarelo'} função stopColor () {clearInterval (myVar)}

Resultado:

A cor seria alternada entre amarelo e rosa. A saída acima é antes de clicar no botão e a abaixo é depois de clicar no botão.

Com isso, chegamos ao final do nosso artigo SetInterval em JavaScript. Espero que você tenha entendido como funciona o método SetInterval.

Confira o por Edureka. O Treinamento de Certificação de Desenvolvimento Web ajudará você a aprender como criar sites impressionantes usando HTML5, CSS3, Twitter Bootstrap 3, jQuery e APIs do Google e implementá-lo no Amazon Simple Storage Service (S3).

Tem alguma questão para nós? Mencione isso na seção de comentários deste blog e entraremos em contato com você.