Howto exit setInterval function defined in jquery

Question

i have this javascript code:

        var step = 8;                 // How many pixels to move per step
        var current = -1920;            // The current pixel row
        var imageWidth = 1920;        // Background image width
        var headerWidth = 960;        // How wide the header is.

        function slide_in(){
            //Go to next pixel row.
            current += step;

            //Set the CSS of the header.
            $('#bgfade').css("background-position",current+"px 0");

            if(current==0) alert('stop');
        }

        //Calls the scrolling function repeatedly
        $('#bgfade').click(function(){        
            var init = setInterval("slide_in()", 1);
        });

this makes the background slide. i want to exit when the var current is = 0, and let the background in that position.

thanks

Answer 1

You need to use clearInterval(), like this:

var step = 8;                 // How many pixels to move per step
var current = -1920;            // The current pixel row
var imageWidth = 1920;        // Background image width
var headerWidth = 960;        // How wide the header is.
var init;

function slide_in(){
    //Go to next pixel row.
    current += step;

    //Set the CSS of the header.
    $('#bgfade').css("background-position",current+"px 0");

    if(current==0) clearInterval(init);
}

//Calls the scrolling function repeatedly
$('#bgfade').click(function(){        
    init = setInterval(slide_in, 1);
});

The other changes here are the scope, so the timer ID is available to the other function, as well as not passing a string to setInterval() to avoid any other potential issues.