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. 🙂

Answer 1

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.