Why does the timer start itself?

Question

I had made a timer which started which is running before I click on the button which triggers the timer. Fiddle. HTML:

<div id="worked">25:00</div>
<button type="button" onclick="update();">Start</button>

JavaScript:

var $worked = $("#worked");

function update() {
    var myTime = $worked.html();
    var ss = myTime.split(":");
    var dt = new Date();
    dt.setHours(0);
    dt.setMinutes(ss[0]);
    dt.setSeconds(ss[1]);

    var dt2 = new Date(dt.valueOf() - 1000);
    var temp = dt2.toTimeString().split(" ");
    var ts = temp[0].split(":");

    $worked.html(ts[1]+":"+ts[2]);
    if (ts[1]==0 && ts[2]==0){
        return 0;
    }
    else{
        setTimeout(update, 1000);
    }
}
setTimeout(update, 1000);

Reason is pasting lots of code without explanation and asking why it doesn't work, probably. — George Irimiciuc, Sep 27 '15 at 10:21

score 5 · Accepted Answer · answered Sep 27 '15 at 10:18

5

It is because you have given the last statement:

setTimeout(update, 1000);

This starts the timer in a second.

answered Sep 27 '15 at 10:18

Praveen Kumar Purushothaman

164,888
24
203
252

score 2 · Answer 2 · answered Sep 27 '15 at 10:17

Remove the last setTimeout(update, 1000); from your code, which calls the function after 1 second

var $worked = $("#worked");

function update() {
  var myTime = $worked.html();
  var ss = myTime.split(":");
  var dt = new Date();
  dt.setHours(0);
  dt.setMinutes(ss[0]);
  dt.setSeconds(ss[1]);

  var dt2 = new Date(dt.valueOf() - 1000);
  var temp = dt2.toTimeString().split(" ");
  var ts = temp[0].split(":");

  $worked.html(ts[1] + ":" + ts[2]);
  if (ts[1] == 0 && ts[2] == 0) {
    return 0;
  } else {
    setTimeout(update, 1000);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="worked">25:00</div>
<button type="button" onclick="update();">Start</button>

score 1 · Answer 3 · answered Sep 27 '15 at 10:18

1

it starts because you are invoking the update function regardless of if you click the button

answered Sep 27 '15 at 10:18

dcohenb

2,099
1
17
34

score 1 · Answer 4 · edited May 23 '17 at 11:50

It's because you have an additional call to setTimeout(update, 1000); after the function definition. This gets executed when it's encountered by the browsers as it does not belong to a function, remove it and it will not auto start.. Also a suggestion is to add this as well:

$(document).ready(function() { $("button").click(update); });

And remove onclick="javascript:update();" from your html.

This is how the corrected final code will look like:

    var $worked = $("#worked");

    function update() {
        var myTime = $worked.html();
        var ss = myTime.split(":");
        var dt = new Date();
        dt.setHours(0);
        dt.setMinutes(ss[0]);
        dt.setSeconds(ss[1]);
        
        var dt2 = new Date(dt.valueOf() - 1000);
        var temp = dt2.toTimeString().split(" ");
        var ts = temp[0].split(":");
        
        $worked.html(ts[1]+":"+ts[2]);
        if (ts[1]==0 && ts[2]==0){
            return 0;
        }
        else{
            setTimeout(update, 1000);
        }
    }


$(document).ready(function() { $("button").click(update); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="worked">25:00</div>
<button type="button">Start</button>

Update: Just to explain why binding the click event via javascript is better than using onclick in the html, see: jQuery.click() vs onClick

I don't understand why do we place the code in $document.ready() function. — , Sep 27 '15 at 10:32
with `$document.ready(function() { })` the function callback gets executed *after* the page has loaded. This is different from putting the code directly inside which gets executed when the script tag is encountered while the page is being loaded. I've actually updated my answer and added the bind call to document.ready which is the safer approach — aiman86, Sep 27 '15 at 10:38
to explain, it's safer because the DOM has been loaded when document.ready event handler is called, and so your javascript can find the button. It would be equally safe if you moved the — aiman86, Sep 27 '15 at 10:42

Why does the timer start itself?

4 Answers4