JavaScript's setTimeout function making unexpected, multiple calls

Question

I've tried to simplify a problem I'm having with the code below. Some of the code relies on jQuery, fyi.

Basically, I expect that when 'New Thing' is clicked, a single alert message will appear. However, if one starts the timer, clicking 'New Thing' results in an unexpected behavior where the number of alert messages that appear is equal to the time elapsed.

This problem is destroying me.

To be thorough, I've included a complete example. I realize it's a bit lengthy.

$(document).ready(function() {
    mainLoop();
});

var counter = 0;
var timerIsOn = 0;
var t;

function mainLoop() {
    handleInput();
    timer();
}

function timerHandle() {
    if (!timerIsOn){
        timerIsOn = 1;
        timer();
    }
}

function timer(){
    if (timerIsOn) {
    t = setTimeout(mainLoop, 1000);
    counter++;
    $("span").text(counter); // To display the elapsed time 
    }
}

// Just simple buttons
function handleInput(){    
    $("#timer").click(timerHandle); 
    $("#new").click(createThing);
}

function Thing() {
    this.talk();
}

Thing.prototype.talk = function() {
    alert("Hello!");
}

function createThing() {
    new Thing;
}

I really appreciate the help!

I set up a fiddle of your problem here : jsfiddle.net/jomanlk/PJhjV — JohnP
– JohnP, Commented Apr 4, 2011 at 7:30
Every time mainLoop is called it calls handleInput, which adds another click listener on the button, so when you click it more than once you get more and more timeouts running, but there is only one "t" to cancel the last one. — RobG
– RobG, Commented Apr 4, 2011 at 7:30
That makes lots of sense! For some reason I thought that event handlers could be overwritten. Thanks! — skiddler
– skiddler, Commented Apr 4, 2011 at 7:53
Don't forget to accept an answer! Do this by clicking the checkmark next to the answer which helped you the most. — RvdK
– RvdK, Commented Apr 4, 2011 at 12:08

RvdK · Accepted Answer · 2011-04-04 07:30:03Z

1

This is because you add multiple eventhandlers to the click event of the buttons

function timer(){
    if (timerIsOn) {
      t = setTimeout(mainLoop, 1000);
      counter++;
      $("span").text(counter); // To display the elapsed time 
    } }

If the timeout fires, it will execute mainLoop. Which will call handleInput and handleInput connect an additional eventhandler to the click event.

function handleInput(){    
     $("#timer").click(timerHandle); 
     $("#new").click(createThing); }

Maining if the timer is running and has fired 3 times. Clicking on #new or #timer will call the appropiate function (timerHandle, createThing) 3 times.

answered Apr 4, 2011 at 7:30

RvdK

19.8k5 gold badges68 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

skiddler Over a year ago

Oh, boy! Didn't realize that multiple events could be bound to elements. Looking back, you'd lose a lot of functionality if elements could only retain a single event handler. Thanks

kgiannakakis · Accepted Answer · 2011-04-04 07:29:22Z

0

The problem is that you register the event handlers numerous times. Every time you call

$("#timer").click(timerHandle);

you register a new event handler. This means, that when the div is clicked, timerHandle will run for so many times as the number you have called the above. You can use unbind to avoid this:

$("#timer").unbind('click');
$("#timer").click(timerHandle);

answered Apr 4, 2011 at 7:29

kgiannakakis

104k28 gold badges163 silver badges197 bronze badges

1 Comment

skiddler Over a year ago

Thanks! I decided to just move handleInput() to $(document).ready(). I originally thought that I'd have to specially check as to whether or not an event has been triggered. That's silly. When an event fires, it'll let you know regardless of what else is going on.

ayk · Accepted Answer · 2011-04-04 07:30:09Z

0

move:

handleInput();

to:

document ready function

answered Apr 4, 2011 at 7:30

ayk

1,3403 gold badges15 silver badges24 bronze badges

2 Comments

skiddler Over a year ago

Thanks -- this is what I ended up doing.

RvdK Over a year ago

Ayk: in the future it is better to give an explanation why it is not working then a plain solution.

Collectives™ on Stack Overflow

JavaScript's setTimeout function making unexpected, multiple calls

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related