0

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

});
Community
  • 1
  • 1
Imnotapotato
  • 5,308
  • 13
  • 80
  • 147

5 Answers5

3
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();
});
MrUpsidown
  • 21,592
  • 15
  • 77
  • 131
  • This one works - only problem with it is that if i click on the right arrow from choice, and it takes me 4 seconds, on the fifth second it slides the slide right away (and accidentally slide 2 instead of one). any idea how to fix that? – Imnotapotato Jun 28 '15 at 10:32
  • slides slide every 5 seconds works, but the buttons stopped responding when clicking on them. – Imnotapotato Jun 28 '15 at 10:58
  • I can't tell. If this is so, you should see an error in your js console. – MrUpsidown Jun 28 '15 at 10:59
  • hmm.. I changed `$('.r-arrow').on('click', function () {` to: `$('.r-arrow').click(function(){` and seems like it's working, what is the difference? why did you chose to use `$('.r-arrow').on('click', function () {` ? – Imnotapotato Jun 28 '15 at 11:22
2

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)
sebastienbarbier
  • 6,542
  • 3
  • 29
  • 55
  • I dont stop the slide in any way.. so I guess I don't need `intervalID`. I changed my code to the one you wrote and it's not working. what can be the problem? :S – Imnotapotato Jun 28 '15 at 10:26
  • I made a [JSFiddle](http://jsfiddle.net/WTJgt/419/) and it works so syntax looks good. I guess you forgot to close a statement or something. – sebastienbarbier Jun 28 '15 at 10:37
  • And you can use `cleanInterval()` to stop the current one when you click from choice and then restart it at 5s to not have the 4s click effect you take about ;) – sebastienbarbier Jun 28 '15 at 10:42
  • seems like your code on jsfiddle works, I will try it in a sec on my file. – Imnotapotato Jun 28 '15 at 10:58
  • I made a copy paste on your code, and now it's not sliding & left and right buttons dont respond. – Imnotapotato Jun 28 '15 at 11:01
  • My code is just an exemple, I don't have much details about your actual project so you need to understand what I did and apply it on your case (stack overflow is not here to do your work but help you to find a solution). If you can't apply it, it is probably you do not understand, or do not try to understand. Difficult to learn stuff by copy/pasting :D. It is a very easy problem, spend some time reviewing your code I am sure you will figure a way to make it work in few minutes. – sebastienbarbier Jun 28 '15 at 11:06
  • I know but maybe im typing something wrong so I copy-paste after I try doing it myself... I'll try again in a few minutes, and in worst case scenario I'll work on a fiddle that simulates my slider so you can see the full code. I'll keep updating here while working :) Thanks for you help and attention btw ! – Imnotapotato Jun 28 '15 at 11:10
1

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);
});
Nermin
  • 6,118
  • 13
  • 23
  • This one works - only problem with it is that if i click on the right arrow from choice, and it takes me 4 seconds, on the fifth second it slides the slide right away (and accidentally slide 2 instead of one). any idea how to fix that? – Imnotapotato Jun 28 '15 at 10:32
  • Try this new way. If I have understood what you want, you can click on arrow, but does not want 2 intervals, just 1, and next will e after 5 secods from click – Nermin Jun 28 '15 at 10:45
0

Use setInterval function instead of setimeout

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

});

check updated JSFIDDLE

Prashant Tapase
  • 2,132
  • 2
  • 25
  • 34
0

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

Akhil B
  • 40
  • 8