1

É possível passar o parâmetro dos milissegundos na função setInteval como variável para que possa ser alterada dinamicamente ou necessariamente precisa ser um número estático?

Fiz alguns testes mas não obtive sucesso e não encontrei nenhuma informação concreta em uma breve pesquisa que fiz...

A ideia de exemplo seria em um jogo, condicionando o score quanto mais alto mais rápido a função executa aumentando a dificuldade.

let mostrarBaloes = setInterval(criarBaloes, tempo);

Tempo começa com 1000, mas quando o score chegar a 100, tempo passa a ser 900, score 200 tempo 800, etc.

É possível ou estou me equivocando em algo?

3 Respostas 3

3

O intervalo é agendado de modo que a cada X segundos será executada a função passada como callback. Portanto, para cada intervalo que você criar, o tempo entre cada "execução" será constante e não pode ser alterado.

Para simular essa alteração, você deve remover o intervalo que já existe e criar um novo, com o tempo atualizado. Para isso, você pode utilizar a função clearInterval, passando como argumento o ID do intervalo (retornado pelo setInterval).

const incrBtn = document.querySelector('#incr');
const decrBtn = document.querySelector('#decr');

// Função que será executada pelo `setInterval`:
function intervalCallback() {
  console.log(new Date().toLocaleTimeString('pt-BR'));
}

// Número que usaremos para o "incremento" ou "decremento".
const step = 250;

// Intervalo (inicialmente 1s).
let currentIntervalTimeout = 1000;
// Armazenaremos o ID do intervalo em execução aqui.
let currentIntervalId = null;

// Função para criar (ou recriar) o intervalo:
function runInterval() {
  if (currentIntervalId) {
    clearInterval(currentIntervalId);
  }

  console.log('Intervalo atual (em ms):', currentIntervalTimeout);
  currentIntervalId = setInterval(intervalCallback, currentIntervalTimeout);
}

// Inicia o intervalo pela primeira vez:
window.addEventListener('load', () => {
  runInterval();
});

// Incrementar o intervalo:
incrBtn.addEventListener('click', () => {
  currentIntervalTimeout += step;
  runInterval();
});

// Decrementar o intervalo:
decrBtn.addEventListener('click', () => {
  currentIntervalTimeout -= step;
  runInterval();
});
<button id="incr">Incrementar</button>
<button id="decr">Decrementar</button>

Uma outra alternativa, um pouco mais simples, é utilizar setTimeouts recursivos, conforme demonstra esta outra resposta.

0
2

Provavelmente você pode conseguir utilizando setTimeout.

var tempo = 1000;
function x() {
  tempo = Math.random()*1000; // altera o tempo aqui
  setTimeout(x,tempo);
  console.log("executou")
}
let mostrarBaloes = setTimeout(x, tempo);

Utilizei um número aleatório pra exemplificar alteração do tempo.

1

Dependendo da sua lógica vc pode preferir usar o método setTimeout no lugar do setInterval. A diferença para esse método é que é executado o callback (Uma única vez) após o tempo determinado.

Sendo assim, no final do seu método criarBaloes vc pode chamar novamente o mesmo método com o setTimeout, criando um intervalo "dinâmico" entre as execuções desse método.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .