In this case am I or am I not required to declare the same variables?

Asked

Viewed 42 times

1

function clock()
{
    var date = new Date();
    var dateLocate = date.toLocaleString()
    var paragraph = window.document.querySelector("#data");
    paragraph.textContent = dateLocate;
    
    window.setInterval(dateUpdate, 1000);

    function dateUpdate()
    {
        var date = new Date();
        var dateLocate = date.toLocaleString()
        var paragraph = window.document.querySelector("#data");
        paragraph.textContent = dateLocate;
    }
}

window.addEventListener("load", clock);
<!doctype html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <title>clock</title>
</head>
<body>

<div id="clock">
    <p id="data"></p>
</div>
    
</body>
</html>

The above code samples the same variables being declared. Well, if you take the same variables within the function clock and leave it at that.

    function clock()
    {
        window.setInterval(dateUpdate, 1000);

        function dateUpdate()
        {
            var date = new Date();
            var dateLocate = date.toLocaleString()
            var paragraph = window.document.querySelector("#data");
            paragraph.textContent = dateLocate;
        }
     }

window.addEventListener("load", clock);

The date will be updated automatically depending on your location, but when the page is updated the function dateUpdate will be called after 1 second and will not call immediately, so if I remove the variables within the function dateUpdate and leave as global in this way.

function clock()
{
     var date = new Date();
     var dateLocate = date.toLocaleString()
     var paragraph = window.document.querySelector("#data");

  window.setInterval(dateUpdate, 1000);

  function dateUpdate()
  {
      paragraph.textContent = dateLocate;
  }
}

window.addEventListener("load", clock);

The date appears, but is not updated in 1 second, so I would have to go back to the first code declaring the same variables. How I would make date to be sampled on the page of imediado and being updated taken 1 second without having to repeat the variables?

javascript

2 answers

7


You don’t need a second function. Just call the function clock() using setTimeout instead of setInterval. Why setTimeout? Because the setTimeout only rotates once. If used setInterval, that runs uninterrupted times, by repudiating the function, will create a new setInterval every second, and at some point it will crash the browser.

function clock()
{
    var date = new Date();
    var dateLocate = date.toLocaleString()
    var paragraph = window.document.querySelector("#data");
    paragraph.textContent = dateLocate;
    
    window.setTimeout(clock, 1000);

}

window.addEventListener("load", clock);
<div id="clock">
    <p id="data"></p>
</div>

But if you were to use the second function, you would have to call again the new Date() to take the updated date and also update the variable dateLocate, but you wouldn’t have to use var for this, since you will only change the values of the variables that have already been declared:

function clock()
{
    var date = new Date();
    var dateLocate = date.toLocaleString()
    var paragraph = window.document.querySelector("#data");
    paragraph.textContent = dateLocate;
    
    window.setInterval(dateUpdate, 1000);

    function dateUpdate()
    {
        date = new Date();
        dateLocate = date.toLocaleString()
        paragraph.textContent = dateLocate;
    }
}

window.addEventListener("load", clock);
<div id="clock">
    <p id="data"></p>
</div>

3

You can simply call your function manually the first time:

function dateUpdate()
{
    var date = new Date();
    var dateLocate = date.toLocaleString()
    var paragraph = window.document.querySelector("#data");
    paragraph.textContent = dateLocate;
}
dateUpdate();
window.setInterval(dateUpdate, 1000);

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.