Handling setTimeout correctly in JavaScript

Question

I am trying to animate some elements on a page using JavaScript (CSS animations with sprites will not work for what I need to do).

I am currently doing something like this;

function animate_element(current_id)
{
    var next_id = parseInt(current_id, 10) + 1;
    $('#lighthouse')[0].src = '/element_' + next_id + '.png';

    if (next_id >= 8) {
        next_id = 0;
    }     

    setTimeout(function() {
        animate_element(next_id);
    }, 750);
}

Technically this works, but this is going to be one of many animations on the page that will be doing something similar and I am worried this is an inefficient way of doing it.

I know best practice is to use clearTimeout() before calling setTimeout, but I don't know how to record the setTimeout and recursively pass it into itself (if that makes any sense!).

Any guidance on the best practice way of doing this would be much appreciated.

That code looks alright as is. setTimeout is plenty "efficient", in that it doesn't waste any CPU cycles or tie up anything else. I'd say your fine. — Alex Wayne
– Alex Wayne, Commented Oct 30, 2012 at 21:35

I Hate Lazy · Accepted Answer · 2012-10-30 21:46:30Z

"I know best practice is to use clearTimeout() before calling setTimeout..."

For what you're doing, there's no reason to call clearTimeout() since the next call will never happen until the last one has been executed.

At that point, there's nothing to clear.

FWIW, your code can be shortened a bit:

function animate_element(current_id) {
    current_id = parseInt(current_id, 10);

    function cycle() {
        document.getElementById('lighthouse').src = '/element_' + current_id + '.png';
        current_id = ++current_id % 8
        setTimeout(cycle, 750);
    }
}

animate_element(0);

Or if there are several that are the same, just with a different ID, you can make it reusable like this:

function animate_element(id, idx) {
    idx = parseInt(idx, 10);

    function cycle() {
        document.getElementById(id).src = '/element_' + idx + '.png';
        idx = ++idx % 8
        setTimeout(cycle, 750);
    }
}

animate_element('lighthouse', 0);

davin · Accepted Answer · 2012-10-30 21:35:35Z

1

Didn't look closely at your code, or what you're doing, but if you want to keep the value, you can close over the variable:

var animate_element = (function(){

   var timer;

   return function(current_id)
   {
       var next_id = parseInt(current_id, 10) + 1;
       $('#lighthouse')[0].src = '/element_' + next_id + '.png';

       if (next_id >= 8) {
           next_id = 0;
       }     

       clearTimeout(timer);
       timer = setTimeout(function() {
          animate_element(next_id);
       }, 750);
   };

})();

answered Oct 30, 2012 at 21:35

davin

45.6k9 gold badges81 silver badges78 bronze badges

Comments

Christian · Accepted Answer · 2012-10-30 21:39:22Z

1

I'd say setInterval would be better over setTimeout in your case.

var current_id = 0;

function animate_element() {
  setInterval(function() {
    var next_id = parseInt(current_id, 10) + 1;
    $('#lighthouse')[0].src = '/element_' + next_id + '.png';

    if (next_id >= 8) {
        next_id = 0;
    }

    current_id = next_id;
  }, 750);
}

answered Oct 30, 2012 at 21:39

Christian

19.8k3 gold badges57 silver badges70 bronze badges

2 Comments

Toby Over a year ago

What is the benefit of doing it this way?

Christian Over a year ago

If you're calling the same function at the end of each timeout, you're actually creating an interval. To save yourself from clearing and calling the timeout, you may as well just use the setInterval() function which was made for that exact purpose.

Collectives™ on Stack Overflow

Handling setTimeout correctly in JavaScript

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related