CODEWITHSUNDEEP
javascriptjquery
Vladimir
Vladimir

Reputation: 1622

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

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

Upvotes: 1

Views: 232

Answers (4)

Johannes H.
Johannes H.

Reputation: 6167

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]();.

Upvotes: 3

Ilia Ross
Ilia Ross

Reputation: 13404

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.

Upvotes: 0

bukart
bukart

Reputation: 4906

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
);

Upvotes: 1

ffflabs
ffflabs

Reputation: 17481

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);
});

Upvotes: 1

Related Questions