Improve JavaScript setInterval code

Question

I currently have this bit of JavaScript which uses jQuery animate to create a water movement effect.

var waves = function() {
    (function() {
        var FirstWave = function() {
            this.css = function(p) {
                var s = Math.sin(p*5)
                var x = (960 * 2) - (p * 960) + 10
                var y = s * 5 + 15
                return {backgroundPosition: "-" + x + "px", bottom: "-" + y + "px"}
            } 
        };

        var tidalWave = function() {
            $("#waves-1").animate({path: new FirstWave}, 10999, "linear");
        };

        setInterval(tidalWave, 500);
    })();
};

waves() is called inside a $(document).ready() handler.

As you can see, the setInterval is set to 500 even though the animation lasts for just under 11 seconds. I did this to ensure that the animation starts on page load, since just calling $.animate() did not kick off the animation.

I'm sure doing it this way will have a lot of speed issues and whatever else.

Can it be improved?

You are wrapping the entire function body with an immediately invoked anonymous function expression? Why would you do that? — Šime Vidas, Jul 08 '11 at 15:06
What about `$(document).ready()` and no `setInterval` at all — davin, Jul 08 '11 at 15:09
@James Are you executing the `waves` function inside the ready handler? — Šime Vidas, Jul 08 '11 at 15:10
@davin, the waves function is called inside a $(document).ready() already :) and I need the animation to keep repeating, which wouldn't happen if I removed `setInterval` — James, Jul 08 '11 at 15:10
Sounds like it is more suited to [codereview](http://codereview.stackexchange.com/) — Quentin, Jul 08 '11 at 15:13
You don't need `setInterval` to keep it repeating. Add a recursive callback to the animation, so it starts itself immediately and automatically when it's finished. — davin, Jul 08 '11 at 15:14
@James Hm, why wouldn't just calling `animate()` outside of a timeout kick off the animation? If you call it, it should execute... — Šime Vidas, Jul 08 '11 at 15:14

score 0 · Accepted Answer · edited May 23 '17 at 12:19

0

You should use setTimeout instead of setInterval (there are various advantages, see here: setTimeout or setInterval?) and because you want it to repeat you should just do another setTimeout within your tidalWave function that invokes tidalWave itself again.

var tidalWave = function() {
   $("#waves-1").animate({path: new FirstWave}, 10999, "linear");
   setTimeout(tidalWave, 500);
};

setTimeout(tidalWave, 500);

Now you could also use $(document).ready instead of the initial timeout.

edited May 23 '17 at 12:19

Community

1
1

answered Jul 08 '11 at 15:17

ximi

596
5
17

`setTimeout` can't re-call a function if `animate` is running right? – James Jul 08 '11 at 15:20
This seems a much cleaner way of doing things. Cheers! – James Jul 08 '11 at 15:26
setTimeout can recall the function if animate is still running. If you want call the function again after the animation has completed use the callback function animate provides you with. – ximi Jul 11 '11 at 09:41

Improve JavaScript setInterval code

1 Answers1