jquery function setInterval

Question

$(document).ready(function(){

    setInterval(swapImages(),1000);

    function swapImages(){

        var active = $('.active'); 
        var next = ($('.active').next().length > 0) ? $('.active').next() : $('#siteNewsHead img:first');

        active.removeClass('active');
        next.addClass('active');
    }
});

I have 13 images contained in a div. The first one has a class called active, which means it is displayed.

The swap images function selects the active image and hides it, and makes the next image active.

However, when the page loads, the function only works correctly once, rather than looping.

Any ideas?

`setInterval` is not a jQuery function. It is a builtin JavaScript function. — mareoraft, Aug 12 '17 at 20:50

score 42 · Accepted Answer · answered Jul 14 '11 at 12:36

42

This is because you are executing the function not referencing it. You should do:

  setInterval(swapImages,1000);

answered Jul 14 '11 at 12:36

Nicola Peluchetti

76,206
31
145
192

score 15 · Answer 2 · answered Jul 14 '11 at 12:37

15

Don't pass the result of swapImages to setInterval by invoking it. Just pass the function, like this:

setInterval(swapImages, 1000);

answered Jul 14 '11 at 12:37

FishBasketGordo

22,904
4
58
91

1

Right answer just one minute late. Thought you deserved an upvote. – BeNice Nov 27 '18 at 15:11

score 4 · Answer 3 · edited Feb 24 '14 at 13:42

4

// simple example using the concept of setInterval

$(document).ready(function(){
var g = $('.jumping');
function blink(){
  g.animate({ 'left':'50px' 
  }).animate({
     'left':'20px'
        },1000)
}
setInterval(blink,1500);
});

edited Feb 24 '14 at 13:42

phemt.latd

1,775
21
33

answered Feb 24 '14 at 13:19

Rajkumar

51
1

JUST RECYCLE THE FUNCTION...THAT'S ALL – Rajkumar Feb 24 '14 at 13:22

score -1 · Answer 4 · answered Jul 14 '11 at 12:33

-1

You can use it like this:

$(document).ready(function(){

    setTimeout("swapImages()",1000);

    function swapImages(){

        var active = $('.active'); 
        var next = ($('.active').next().length > 0) ? $('.active').next() : $('#siteNewsHead img:first');

        active.removeClass('active');
        next.addClass('active');
        setTimeout("swapImages()",1000);
}

});

answered Jul 14 '11 at 12:33

ashvagan

43
2
8

No, becuase like this you call the function. you need to pass a reference to it: parenthesis are not needed – Nicola Peluchetti Jul 14 '11 at 12:37
Yeah, I confused it with setTimeout function. Just edited the post – ashvagan Jul 14 '11 at 12:38
Passing the code s you do is a bad practice because the code is evalued – Nicola Peluchetti Jul 14 '11 at 12:38
You're thinking of `setTimeout`, not `setInterval`, which will keep executing the code at regular intervals own its own. – FishBasketGordo Jul 14 '11 at 12:38

score -1 · Answer 5 · answered Jul 14 '11 at 13:13

-1

try this declare the function outside the ready event.

    $(document).ready(function(){    
       setInterval(swapImages(),1000); 
    });


    function swapImages(){

    var active = $('.active'); 
    var next = ($('.active').next().length > 0) ? $('.active').next() :         $('#siteNewsHead img:first');
    active.removeClass('active');
    next.addClass('active');
}

answered Jul 14 '11 at 13:13

zevy_boy

902
1
7
11

This has nothing to do with the problem. The function will still execute once, when the DOM's ready event fires and not every 1000 ms from that point on. – Matey Yanakiev Dec 04 '12 at 00:19

jquery function setInterval

5 Answers5