This is happening because you are clearing the nextInter
just one line after you've created it.
nextInter = setInterval(function(){rotate();}, 10000 );
clearInterval(nextInter);
However, if you remove the last clearInterval
, your nextInter
interval will call rotate
every 10 seconds, that will set a new interval for every 4 seconds. This certainly will cause unexpected behavior. I think you are looking for setTimeout
instead.
$('#next').click(function () {
clearInterval(inter);
setTimeout(rotate, 10000);
});
Also, if you want to prevent from doing multiple rotate
s if you click the next button multiple times, you could create a variable outside your callback scope to store your setTimeout
instance and then clear it when the button is clicked. Example:
var rotateTimeout;
$('#next').click(function () {
clearInterval(inter);
clearTimeout(rotateTimeout);
rotateTimeout = setTimeout(rotate, 10000);
});