How can I call clearInterval outside of a function in jQuery? Outside the setInterval

Question

    function iPadMovie(id) {
    $(function () {
        var i = 1;
        var interval = setInterval(function () {
            jQuery('.animationMax img').attr({
                src: 'http://jdsports.scene7.com/is/image/JDSports/127932jd' + ('0' + i).slice(-2) + '?hei=255&wid=427&resmode=sharp&op_usm=1.1,0.5,0,0&defaultImage=JDSports/sizeImageMissing'
            });
            i++;
            if (i === 28) i = 1;
        }, 100);
    });
}

function playIpad(){
    iPadMovie();
}


function stopIpad(){
    clearInterval = interval;
}

You can see the fiddle here: http://jsfiddle.net/Vv2u3/15/ I want to be able to stop the movie and restart it if they press play. Surely I can use clearInterval outside the method?

Answer 1

Here is example link.

var interval;

function iPadMovie(id) {
    $(function () {
        var i = 1;
        interval = setInterval(function () {
            jQuery('.animationMax img').attr({
                src: 'http://jdsports.scene7.com/is/image/JDSports/127932jd' + ('0' + i).slice(-2) + '?hei=255&wid=427&resmode=sharp&op_usm=1.1,0.5,0,0&defaultImage=JDSports/sizeImageMissing'
            });
            i++;
            if (i === 28) i = 1;
        }, 100);
    });
}

function playIpad(){
    iPadMovie();
}

Little bit explanation here. First of all, your interval variable, (which is actual handler for returned callback function by setInterval) is not visible outside of iPadMovie() function so interval variable should be declared outside of this function. Second you should call clearInterval(handler) function inside of stopIpad() function. More information can be founded here.

function stopIpad(){
    clearInterval(interval);
}