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);
}

Answer 2

clearInterval is a function. You should call it, passing it the interval you want to clear as the only argument:

function stopIpad(){
    clearIntervar(interval);
}

This part is almost correct, interval is a variable where you remember the interval handle that you want to clear:

var interval = setInterval(...);

However, the interval variable needs to be declared outside the iPadMovie function so that it's visible to the stopIpad function. Move the var statement outside.

Also, what happens if the play button is pressed twice? You could stop the current interval before you set a new one:

var interval;
function iPadMovie(){
    clearInterval(interval);
    interval = setInterval(...);
}

As a side note, is there a reason why the iPadMovie waits for document ready? I would expect it to only be called after that point. If this is the case, you can remove the $(function(){...}) wrapper.