Como pausar um intervalo em JavaScript?

No processo de implementar várias funcionalidades ao mesmo tempo, é necessário desativar uma funcionalidade específica por algum tempo. Isso ajuda a observar o funcionamento de cada funcionalidade. Às vezes, há um requisito para exibir uma funcionalidade específica para um tempo definido e depois desativá -lo. Nesses casos, fazer uma pausa em um intervalo em JavaScript é de grande ajuda para lidar com essas situações.

Como pausar um intervalo em JavaScript?

As seguintes abordagens podem ser utilizadas em combinação com o “setInterval ()”Método para pausar um intervalo no JavaScript:

• ““Valor booleano" abordagem.
• O "jQuery" abordagem.
• ““ClearInterval ()”Método.

Abordagem 1: Pause um intervalo no JavaScript usando o método setInterval () com abordagem de valor booleano

O "setInterval ()”O método chama uma função específica em intervalos especificados repetidamente. Essa abordagem pode ser implementada para atribuir um valor booleano específico à função a ser acessada, o que resultará na pausa e na remoção do intervalo definido.

Sintaxe

setInterval (função, milissegundos)

Na sintaxe acima:

• ““função”Refere -se à função de executar e“milissegundos”É o intervalo de tempo.

Exemplo

Para demonstrar isso, crie um documento HTML e coloque as seguintes linhas dentro dele:

= "Head"> segundos:



Retomar
Pausa

No código acima:

• Dentro do "”Tag, inclua a“período”Elemento para incluir os segundos a ser decorrido.
• Depois disso, crie dois botões com o anexo “ONCLICK”Evento redirecionando para duas funções separadas.
• Um dos botões criados resultará em uma pausa no intervalo e o outro irá retomar.

Agora, na parte JavaScript do Código:

Varget = documento.getElementById ("Head");
var parado = false;
VAR DOLAPSEDTIME = 0;
var t = setInterval (function ()
se(!parado)
Tempo decorrido ++;
pegar.INNERTEXT = "Segundos decorridos:" + Tempo decorrente;

, 1000);
FunctionResumeInterval ()
parado = falso;

functionPauseInterval ()
parado = true;

No trecho de código acima:

• Acesse o "período”Elemento pelo seu especificado“eu ia”Usando o“documento.getElementById ()”Método.
• Na próxima etapa, atribua um valor booleano “falso" para o "parou" variável. Da mesma forma, inicialize a variável “Tempo decorrido" com "0”Para aumentá -lo.
• Agora, aplique o “setInterval ()”Método para a função e incremento o tempo decorrido inicializado na forma de segundos, à medida que o intervalo é definido como (1000 milissegundos = 1 segundo)
• Na próxima etapa, declare uma função chamada “RURUMEINTVAL ()”. Aqui, atribua o valor booleano como “falso”Para a variável anteriormente atribuída“parou”. Isso resultará em retomar o intervalo pausado no botão Clique.
• Da mesma forma, defina uma função chamada “pauseInterval ()”Que pausará o intervalo definido, atribuindo o valor booleano da mesma forma, conforme discutido.

Saída

Na saída acima, pode -se observar que o requisito desejado é atendido.

Abordagem 2: Pause um intervalo no JavaScript usando o método setInterval () com a abordagem jQuery

Essa abordagem pode ser implementada para acessar o botão diretamente, anexar um evento e atribuir um valor booleano.

Sintaxe

setInterval (função, milissegundos)

Na sintaxe acima:

• ““função”Refere -se à função de executar e“milissegundos”É o intervalo de tempo.

Exemplo

O seguinte Snippet demonstrou o conceito:

= "Head"> segundos:



Retomar
Pausa

No código acima:

• Em primeiro lugar, inclua o “jQuery" biblioteca.
• Na próxima etapa, revive a abordagem discutida para incluir o “período”Elemento para acumular“segundos" iniciar.
• Depois disso, da mesma forma, inclua dois botões separados para pausar e retomar o intervalo pausado.

Na parte do jQuery, passe pelas seguintes linhas do código:

var get = $ ('span');
var parado = false;
VAR DOLAPSEDTIME = 0;
var t = janela.setInterval (function ()
se(!parado)
Tempo decorrido ++;
pegar.texto ("segundos decorridos:" + tempo de decomposição);

, 1000);
$ ('.pausa').on ('clique', function ()
parado = true;
);
$ ('.jogar').on ('clique', function ()
parado = falso;
);

No código acima, siga as etapas declaradas:

• Buscar o “período”Elemento apontando para o“elemento" nome.
• No código adicional, da mesma forma, aloque um valor booleano para o “parou”Variável e inicialize o tempo decorrido com“0”.
• Agora, revive a abordagem discutida para aplicar o “setInterval ()”Método para a função e aumenta da mesma forma o tempo decorrido na forma de segundos.
• Por fim, anexe o “clique”Evento para os botões acessados ​​e atribui o valor booleano declarado a cada um dos botões usando o jQuery“sobre()”Método.

Saída

Na saída acima, é evidente que o temporizador está pausado e retomado com sucesso.

Abordagem 3: Pause um intervalo no JavaScript usando o método setInterval () com o método clearInterval ()

O "ClearInterval ()”Método limpa o cronômetro definido no método setInterval (). Este método pode ser utilizado para pausar o intervalo definido “permanentemente”.

Sintaxe

setInterval (função, milissegundos)

Na sintaxe acima:

• ““função”Refere -se à função de executar e“milissegundos”É o intervalo de tempo definido.

ClearInterval (intervalo)

Na sintaxe acima:

• ““intervalo”Refere -se ao intervalo retornado do método setInterval ()

Exemplo

Passe pelas linhas de código declaradas:

= "Head" Style = "Fonte-peso: Bold;"> segundos:



Pausa

• Aqui, repita as etapas discutidas nos métodos anteriores para incluir o “período" elemento.
• Na próxima etapa, da mesma forma, crie um botão com um “ONCLICKEvento invocando a função pauseInterval ().

Execute as etapas declaradas na parte JavaScript do código:

Varget = documento.getElementById ("Head");
VAR DOLAPSEDTIME = 0;
var t = setInterval (function ()
Tempo decorrido ++;
pegar.INNERTEXT = "Segundos decorridos:" + Tempo decorrente;
, 1000);
functionPauseInterval ()
ClearInterval (t);

• Na primeira etapa, da mesma forma, acesse o “período”Elemento por seu“eu ia”Usando o“documento.getElementById ()”Método.
• Repita os métodos discutidos para inicializar o “decorrido”Hora, aplicando o“setInterval ()”Método, e incrementando o tempo decorrido declarado de acordo com o intervalo definido.
• Finalmente, declare uma função chamada “pauseInterval ()”. Aqui, aplique o “ClearInterval ()”Método com a função“t”Como seu parâmetro sobre o qual o intervalo é definido. Isso resultará na pausa do intervalo definido permanentemente.

Saída

Aqui, o cronômetro está pausado permanentemente.

Nós compilamos as abordagens para pausar um intervalo em JavaScript.

Conclusão

O "valor booleano"Abordagem, a"jQuery"Abordagem, ou a"ClearInterval ()”O método pode ser aplicado para pausar um intervalo em JavaScript. A primeira abordagem pode ser aplicada para atribuir um valor booleano correspondente sobre a função acessada para pausar e retomar o cronômetro de conjunto. A abordagem jQuery pode ser utilizada para acessar o botão diretamente, anexar um evento e atribuir um valor booleano, resultando em menos complexidade de código. O método clearInterval () pode ser implementado para pausar o intervalo definido permanentemente. Este tutorial explicou as abordagens para pausar um intervalo em JavaScript.