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