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:
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ê.