Как я могу организовать свой код больше, чтобы предотвратить нежелательное поведение?

Question

На данный момент я написал скрипт для таймера обратного отсчета до определенного дня.Проблема в том, что в тот момент, когда вы обновляете браузер, ему требуется 1 секунда, чтобы он появился, а не тот, который появляется мгновенно.

Я действительно нашел способ заставить его появиться мгновенно, но мне пришлось повторитьблок кода с countDownDate, now, timeDifference, oneDay, days, hours, minutes, seconds и document.getElementById("timer").innerHTML = ...;, поместив его прямо поверх timer(), что совершенно неэффективно.

В моей попытке ниже, обратный отсчет появляется примерно через секунду после обновления браузера, но я хочу, чтобы он появился мгновенно.Моя цель здесь - создать повторно используемый код.

Что я делаю не так и как я могу это исправить?

Вот HTML:

<h1 id="timer"></h1>

Вот js:

function conversion() {
    var countDownDate = new Date("June 1, 2019 24:00:00");

    var now = new Date().getTime(); 
    var timeDifference = countDownDate - now; 
    var oneDay         = 1000 * 60 * 60 * 24; 

    var days = Math.floor(timeDifference / (oneDay));
    var hours = Math.floor((timeDifference % (oneDay)) / (1000 * 60 * 60));
    var minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);

    document.getElementById("timer").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
}

function timerCountdown() {
    var timer = setInterval(function() {
        conversion();
        if(timeDifference < 0) { 
            clearInterval(timer); 
            document.getElementById("timer").innerHTML = "Timer's over."; 
        } 

    }, 1000); 
}

timerCountdown();

Answer 1

Поместите обратный вызов setInterval в переменную, и оба вызовите setInterval с этой функцией и вызовите его немедленно при загрузке страницы:

function timerCountdown() {
  var timer = setInterval(intervalCb, 1000); 
  function intervalCb() {
    conversion();
    if(timeDifference < 0) { 
      clearInterval(timer); 
      document.getElementById("timer").innerHTML = "Timer's over."; 
    }
  }
  intervalCb();
}
timerCountdown();

Answer 2

Просто позвоните conversion() немедленно.