Question

When a user lands on my homepage, I use setInterval to cycle through some classes for a visual effect:

    var toggleSlide = setInterval( function() {
      $('#cs-main nav li.cycle').removeClass("cycle" || " ").next().last().addClass("cycle");
},600);

I’d like this effect only to run once when the user clicks on the splash page, and the site is loaded via ajax:

    $("#splash").live('click', function () {
        $(this).fadeOut('slow', function () {
            $('#main').load('client.html', function () {
            }).fadeIn();

            var toggleSlide = setInterval( function() {
      $('#cs-main nav li.cycle').removeClass("cycle" || " ").next().last().addClass("cycle");
},600);

        });
        return false;
    });

The issue I am running into is (I’m assuming) because setInterval runs in the global scope, anytime #cs-main nav li.cycle appears on a page, setInterval does its thing. This is problematic because this class appears on my subpages, whereas my intention is only to have it run once when the user clicks on #splash.

Answer 1

Use clearInterval() to kill the timer once you are done with it…

Try the folowing,

$("#splash").live('click', function () {
    $(this).fadeOut('slow', function () {

        var toggleSlide = setInterval( function() {
            $('#cs-main nav li.cycle').removeClass("cycle" || " ").next().last().addClass("cycle");
        },600);

        $('#main').load('client.html', function () {
        }).fadeIn('slow', function(){
            clearInterval(toggleSlide);
        });



    });
    return false;
});