setInterval() with Jquery script

Question

A quick thank you to those that have helped me so far with this script, you have all helped me enormously in learning some of the more elegant sides of javascript and jquery.

I have one final problem with this script, I am using setinterval() to cycle through an image changer, the JS/Jquerycode is as follows:

$(function() {
var rotateTimer = setInterval(rotateImg,15000);

$('#feature-links a').click(function() {
    if (!$(this).hasClass('a-active')) {
        clearInterval(rotateTimer);
        switchToImg($(this).attr('class'));

    }
});

function switchToImg(image) {
    var $featureImage = $('#feature-image');        
    $featureImage.fadeOut(200, function() {
        $featureImage.css('background-image', 'url(images/main_' + image + '.jpg)').fadeIn(200);
        $('#feature-detail div').removeClass('d-active').filter('.d' + image).addClass('d-active');
    });
    $('#feature-links a').removeClass('a-active').filter('.' + image).addClass('a-active');
};

function rotateImg() {
    var next = 'a' + (parseInt($('#feature-links a.a-active').attr('class').match(/[0-9]/))+parseInt(1));

    if (!$('#feature-links a').hasClass(next))
        next = 'a1';
    switchToImg(next);
}
});

This script works on class names of <a> tags that allow a user to manually switch to an image. As well as this, rotateImg() is providing an automated image/text cycle every 15 seconds with the help of setInterval().

The problem I have is with setInterval() re-initialising once a user has clicked on a link manually.

In the .click function I clear the interval timer and then make a call to the switchToImg() function with the class name of the <a> tag that was clicked on passed as a variable.

I'm trying to work out how I can re-set the timer to avoid a user clicking on a link towards the end of the cycle and having it switch immediately to the next image.

I have researched building my own callback function in to switchToImg() so that once the function has completed the timer is reset, ideally I'd like this to be a longer time initially (30 seconds for example) but then settle back down into the 15 second clock. My research however has lead me to a load of different repositories that I'm having difficulty making head or tail of.

Any guidance as to how I can build this functionality into the script would be really appreacited. Thanks for your time. :)

As a side-note: parseInt($('#feature-links a.a-active').attr('class').match(/[0-9]/))+parseInt(1) should be parseInt($('#feature-links a.a-active').attr('class').match(/[0-9]/), 10)+1. parseInt takes the radix (base) of the number (in this case 10) as a 2nd parameter, it's optional, but recommended. Also parseInt(1) is completely useless. — gen_Eric
– gen_Eric, Commented Oct 27, 2011 at 16:00
Thank you Rocket, I was hoping someone would evaluate that bit of code, knowing that about the radix is very useful, thank you. I shall ammend my code. +1 — David Barker
– David Barker, Commented Oct 27, 2011 at 16:06
Most browsers will return the right value if you forget the radix, but you can't always be sure. :-) — gen_Eric
– gen_Eric, Commented Oct 27, 2011 at 16:13

jfriend00 · Accepted Answer · 2011-10-27 15:55:02Z

2

I'm not 100% sure I follow what you're asking, but if what you're trying to do is to restart the interval timer after a delay after the user clicks, then you could do that like this:

$('#feature-links a').click(function() {
    if (!$(this).hasClass('a-active')) {
        clearInterval(rotateTimer);
        switchToImg($(this).attr('class'));
        setTimeout(function() {
            rotateTimer = setInterval(rotateImg, 15*1000);
        }, 15*1000);
    }
});

You would be using a one-shot setTimeout() call to restart the interval timer after a 15 second delay. This would give you 15+15=30 seconds before the next image switched again after a click and then 15 seconds each time after that.

edited Oct 27, 2011 at 15:55

answered Oct 27, 2011 at 15:46

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

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

1 Comment

David Barker Over a year ago

Well without knowing 100% what I was asking for, you hit the nail on the head. Thank you, this works!

Johan B.W. de Vries · Accepted Answer · 2011-10-27 15:48:11Z

0

Not sure I understand the question correctly. But basically I get that you want to prevent the timer from happening after the user clicks. Shouldn't calling setInterval right after switchToImg do exactly that? It'll call switchToImg then after every 15 seconds from the click of the user.

answered Oct 27, 2011 at 15:48

Johan B.W. de Vries

3912 silver badges7 bronze badges

Collectives™ on Stack Overflow

setInterval() with Jquery script

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related