CODEWITHSUNDEEP
javascriptjquery
Imnotapotato
Imnotapotato

Reputation: 5798

Run a jQuery .click event on an element every 5 seconds repetitively

I have an element which I want to be "clicked" every 5 seconds, does something, and then after 5 seconds it gets clicked again, does something, ect'.

So I used setTimeout, which does the job for the 5 seconds thing: (found the example here: How to hide a div after some time period?)

And there's the jQuery event .trigger which I found here: JQuery automatic click after 4 sec

I tried looping it using 'for' and I got a .click event that happens after the first 5 seconds, and then uses the .click event again and again without the 5 seconds pause: http://jsfiddle.net/WTJgt/417/

In general, I built my first jQuery rotator :)!

with right and left buttons - and I want it to move a slide after x seconds by clicking it "without clicking".

This is my .click event code for the "next" element button: 

// variables     
var rotCounter = 0;
var moveInPixles = 0; 
var nunSlides = 4; // Enter the number of slides

$(".r-arrow").click(function(){

    moveInPixles = ( rotCounter + 1) * 746 * -1;
    moveInPixles += 'px'; 

    $(".rotator-container").css('margin-left', moveInPixles);

    rotCounter++;

    $(".dot").css('background-color', 'white');
    $(".dot:eq("+rotCounter+")").css('background-color', 'yellow');  

    if (rotCounter == nunSlides) {
        rotCounter = 0; 
        $(".rotator-container").css('margin-left', 0);
        $(".dot").css('background-color', 'white');
        $(".dot:eq("+rotCounter+")").css('background-color', 'yellow');
    } 

});

Upvotes: 0

Views: 5483

Answers (5)

Nermin
Nermin

Reputation: 6100

Would do the trick

var rightArrowIntervalId = setInterval(function(){
   $(".r-arrow").trigger('click');
}, 5000);

In your click event add at 

$(".r-arrow").click(function(){
    window.clearInterval(rightArrowIntervalId);
    // will destroy existing interval

    moveInPixles = ( rotCounter + 1) * 746 * -1;
     .....

    // will create new interval in 5 seconds
    rightArrowIntervalId = setInterval(function(){
       $(".r-arrow").trigger('click');
    }, 5000);
});

Upvotes: 1

MrUpsidown
MrUpsidown

Reputation: 22490

setInterval(function () {
    $(".r-arrow").click();
}, 5000);

Edit:

Use setInterval and clearInterval so that you can reset the interval on button click. Your code needs refactoring because you can't really use it as it is.

var intervalId;
var rotCounter = 0;
var moveInPixles = 0; 
var nunSlides = 4; // Enter the number of slides

autoRotate();

function autoRotate() {

    intervalId = window.setInterval(function () {
        rotateStuff();
    }, 5000);
}

function rotateStuff() {

    moveInPixles = (rotCounter + 1) * 746 * -1;
    moveInPixles += 'px';

    $(".rotator-container").css('margin-left', moveInPixles);

    rotCounter++;

    $(".dot").css('background-color', 'white');
    $(".dot:eq(" + rotCounter + ")").css('background-color', 'yellow');

    if (rotCounter == nunSlides) {
        rotCounter = 0;
        $(".rotator-container").css('margin-left', 0);
        $(".dot").css('background-color', 'white');
        $(".dot:eq(" + rotCounter + ")").css('background-color', 'yellow');
    }
}

$('.r-arrow').on('click', function () {

    window.clearInterval(intervalId);
    rotateStuff();
    autoRotate();
});

Upvotes: 3

sebastienbarbier
sebastienbarbier

Reputation: 6832

Dont do a click, but just trigger the javascript function every five seconds. by triggering a click you also activate all other functions listening to the event and some might be in conflict with your code or used by other libraries.

You can use setInterval() to do so.

Your code should looks like this :

// variables     
var rotCounter = 0;
var moveInPixles = 0; 
var nunSlides = 4; // Enter the number of slides

var myFunction = function(){

    moveInPixles = ( rotCounter + 1) * 746 * -1;
    moveInPixles += 'px'; 

    $(".rotator-container").css('margin-left', moveInPixles);

    rotCounter++;

    $(".dot").css('background-color', 'white');
    $(".dot:eq("+rotCounter+")").css('background-color', 'yellow');  

    if (rotCounter == nunSlides) {
        rotCounter = 0; 
        $(".rotator-container").css('margin-left', 0);
        $(".dot").css('background-color', 'white');
        $(".dot:eq("+rotCounter+")").css('background-color', 'yellow');
    } 

});

$(".r-arrow").click(myFunction);

setInterval(myFunction, 5000);

It is important to assign setInterval to a variable then you will be able to stop it using clearInterval()

var intervalID = window.setInterval(code, delay);

Then when you need to stop it :

window.clearInterval(intervalID)

Upvotes: 2

Prashant Tapase
Prashant Tapase

Reputation: 2147

Use setInterval function instead of setimeout

     $( function() {
    $('#login').click(function() {
        alert('login button clicked');
    });
        setInterval(function() {
            $('#login').trigger('click');
        }, 500);

});

check updated JSFIDDLE

Upvotes: 0

Akhil B
Akhil B

Reputation: 40

I don't fully understand the question, but if you want to call a function every 5 seconds rather than just once then use setInterval().

Upvotes: 0

Related Questions