How can i make a script load faster?-CodePudding

Im making a digital clock for my webpage. But every time i enter the page, it takes 1 second before the string with the current time appears. Is there any way to change that and make it faster so it is not that notisable for the user? Thank you

My js code:

const add_zero = (number) => {
    return number < 10 ? `0${number}` : number;
}

const show_current_time = () => {
    setInterval(() => {
        const today = new Date();
        const month = today.getMonth()   1;
        const year = today.getFullYear();
        const date = today.getDate();

        const hours = add_zero(today.getHours());
        const minutes = add_zero(today.getMinutes());
    
        const current_date = `${date}/${month}/${year} ${hours}:${minutes} |`;
        
        document.getElementById("show_current_time").innerHTML = current_date;
    }, 1000)
}

window.onload = show_current_time;

CodePudding user response：

You can try calling a function that does the work once, and only then do the setInterval() for that function.

set_current_time()
setInterval(set_current_time, 1000);

CodePudding user response：

It "takes 1 second before the string with the current time appears", because the function show_current_time has setInterval and the last argument is 1000 (1 second).

The function is doing more than what its name suggests: showing the current time. It's also updating it each second. It starts the first update after the document is loaded.

Remove setInterval:

const show_current_time = () => {
  const today = new Date();
  const month = today.getMonth()   1;
  const year = today.getFullYear();
  const date = today.getDate();

  const hours = add_zero(today.getHours());
  const minutes = add_zero(today.getMinutes());

  const current_date = `${date}/${month}/${year} ${hours}:${minutes} |`;

  document.getElementById("show_current_time").innerHTML = current_date;
}

If you add show_current_time();, it will call the function sooner. Calling setInterval(show_current_time, 1000); updates it each second.

window.addEventListener(
    'load',
  () => {
    show_current_time();
    setInterval(show_current_time, 1000);
  }
);

I avoid using window.load because you lose everything you did with it when you change it.

There might be a gap between the beginning of the document being loaded, and the functions being called. But, depending on the script size how, and how it's loaded, probably it's not noticeable.

CodePudding user response：

use requestAnimation frame, on a recursive loop:

https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

CodePudding user response：

const show_current_time = () => {
    const today = new Date();
    const month = today.getMonth()   1;
    const year = today.getFullYear();
    const date = today.getDate();

    const hours = add_zero(today.getHours());
    const minutes = add_zero(today.getMinutes());

    const current_date = `${date}/${month}/${year} ${hours}:${minutes} |`;
    
    document.getElementById("show_current_time").innerHTML = current_date;
}
show_current_time()
setInterval(show_current_time,1000)