Criar um alerta na tela quando um horário especifico for atingido

Question

Estou com a seguinte função:
function time() {
  let today = new Date();
  today.setMinutes(today.getMinutes() + 30);
  let h = today.getHours().toString().padStart(2, '0');
  let m = today.getMinutes().toString().padStart(2, '0');
  let s = today.getSeconds().toString().padStart(2, '0');
  document.getElementById('1').innerHTML = `${h}:${m}:${s}`;
}

Essa função é acionada quando aperto um botão. Porém precisava que quando o horário que é jogado no HTML (no caso a hora local + 30 min) fosse o horário local, emitisse um alert padrão ou um pop up, com uma mensagem ao usuário.

Luiz Felipe · Accepted Answer

Basta calcular a diferença (em milissegundos) entre a data atual e a data na qual você quer emitir o alerta, passando esse intervalo para o segundo argumento do setTimeout.
Como você já tem a instância da data "do futuro", pode fazer algo assim:
function time() {
  let future = new Date();
  future.setMinutes(future.getMinutes() + 30);
  let h = future.getHours().toString().padStart(2, '0');
  let m = future.getMinutes().toString().padStart(2, '0');
  let s = future.getSeconds().toString().padStart(2, '0');
  document.getElementById('1').innerHTML = `${h}:${m}:${s}`;
  
  let interval = future.getTime() - Date.now();
  setTimeout(() => {
    alert('30 minutos se passaram.');
  }, interval);
}

Observe que renomeei today para future só para ficar um pouco mais claro. Note também que Date.now retorna o timestamp atual, em milissegundos.
Vale lembrar que, se o usuário sair da página, o timeout perderá o efeito.

Criar um alerta na tela quando um horário especifico for atingido

One Answer

Add your own answers!

Ask a Question