Jquery loop and run the (click) functions each X seconds

Question

I have this (simplified for here) code which change the background position on click, but i need to put them in a auto loop too

<script type="text/javascript">
$(window).load(function(){
    $(".sle1").click(function() {
        $(".slimgs").animate({backgroundPosition: '-908px 0px'});
    });
    $(".sle2").click(function() {
        $(".slimgs").animate({backgroundPosition: '-681px 0px'});
    });
    $(".sle3").click(function() {
        $(".slimgs").animate({backgroundPosition: '-454px 0px'});
    });
});
</script>

I mean after 5 seconds of page load this first function runs

$(".sle1").click(function() {
       $(".slimgs").animate({backgroundPosition: '-908px 0px'});
});

then after 5 second the .sle2 and when it reachs the .sle3 (last function) after 5 seconds it should go back and run the first function again (a loop)

i tried putting ", 5000)" after each function but it didn't work

any help is appreciated

Johannes H. · Accepted Answer · 2013-11-06 03:45:59Z

3

Use window.setInterval to execute a function every 5 seconds.

To cycle through those three functions, you could store all of them in an array and set i every time to the function that should be called next.

var i = 0;
var functions = [
    function() {
        // instead of copying that code, you could also do
        // $(".sle1").click() - or you can just use functions[0]
        // as argument when assigning the click listener.
        $(".slimgs").animate({backgroundPosition: '-908px 0px'});
        i = 1;
    },
    function() {
        // second animation here
        i = 2
    },
    function() {
        // third animation here
        i = 0
    }
];
window.setInterval(function () {
    functions[i]();
}, 5000);

[Edit]: no more ring-counter as that wouldn't work with the clicking.
For future reference: If you don't need the clicking to interfere with the automatic switching and want to archive something similar with only automatic cycling, get rid of th i= statements in the functions and instead insert i++; i%= functions.length after functions[i]();.

edited Nov 6, 2013 at 3:45

answered Nov 3, 2013 at 21:07

Johannes H.

6,1671 gold badge23 silver badges44 bronze badges

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

2 Comments

Vladimir Over a year ago

thanks this worked, i had to define the i inside my functions each time to let it know where it shold switch, but other than that works perfect

Johannes H. Over a year ago

I didn't get that clicking should interfere with the automatic switching, that's why I didn't set i in the functions. I just got that by reading your comment on amenadiel's answer ;) I have edited my answer to reflect the changes.

ffflabs · Accepted Answer · 2013-11-03 21:07:23Z

1

This should work, altough there are more ellegant ways to do it

$(window).load(function(){
    $(".sle1").click(function() {
        $(".slimgs").animate({backgroundPosition: '-908px 0px'});
        window.setTimeout(function() {
             $(".sle2").click();
        },5000);
    });
    $(".sle2").click(function() {
        $(".slimgs").animate({backgroundPosition: '-681px 0px'});
        window.setTimeout(function() {
             $(".sle3").click();
        },5000);
    });
    $(".sle3").click(function() {
        $(".slimgs").animate({backgroundPosition: '-454px 0px'});
        window.setTimeout(function() {
             $(".sle1").click();
        },5000);
    });

    window.setTimeout(function() {
             $(".sle1").click();
    },5000);
});

answered Nov 3, 2013 at 21:07

ffflabs

17.6k5 gold badges57 silver badges79 bronze badges

2 Comments

Vladimir Over a year ago

very simple and i could understand it as i'm a new to jquery, thank you

Vladimir Over a year ago

the only problem is, when its in step 2 and i click on step 1 it jums to step 3 and its not matched with the click function

bukart · Accepted Answer · 2013-11-03 21:07:36Z

1

setTimeout(
    function() {
        $(".sle1").trigger('click');

        setInterval(
            function() {
                $(".sle1").trigger('click');
            },
            15000
        );

    },
    5000
);

setTimeout(
    function() {
        $(".sle2").trigger('click');

        setInterval(
            function() {
                $(".sle2").trigger('click');
            },
            15000
        );

    },
    10000
);

setTimeout(
    function() {
        $(".sle3").trigger('click');

        setInterval(
            function() {
                $(".sle3").trigger('click');
            },
            15000
        );

    },
    15000
);

answered Nov 3, 2013 at 21:07

bukart

4,9162 gold badges23 silver badges40 bronze badges

Comments

Ilia Ross · Accepted Answer · 2013-11-03 21:23:20Z

0

In case you're willing to improve your code, making it more concise, you could try the following, using window.setInterval:

function changeBackground(interval, frames) {
    var int = 1;
    function changer() {
        document.body.id = "b" + int;
        int++;
        if (int === frames) {
            int = 1;
        }
    }
    var swap = window.setInterval(changer, interval);
}
changeBackground(2000, 10); //milliseconds, frames

Example online

Talking about your example, it's harder to tell as it's not very clear. Try adding .stop() and duration for your .animate() effects:

$(window).load(function(){
    $(".sle1").click(function() {
        $(".slimgs").stop().animate({backgroundPosition: '-908px 0px'}, 5000);
    });
    $(".sle2").click(function() {
        $(".slimgs").stop().animate({backgroundPosition: '-681px 0px'}, 5000;
    });
    $(".sle3").click(function() {
        $(".slimgs").stop().animate({backgroundPosition: '-454px 0px'}, 5000);
    });
});

.stop() - The jQuery .stop() method is used to stop animations or effects before it is finished.

edited Nov 3, 2013 at 21:23

answered Nov 3, 2013 at 21:06

Ilia Ross

13.5k11 gold badges56 silver badges89 bronze badges

2 Comments

Johannes H. Over a year ago

instead of the if (int === frames), you could use modulo division (See my answer). That's even more elegant.

Ilia Ross Over a year ago

Thanks, very nice idea, Johannes +1!

Collectives™ on Stack Overflow

Jquery loop and run the (click) functions each X seconds

4 Answers 4

2 Comments

2 Comments

Comments

Example online

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related