Question

This is my code :

window.setInterval(function(){
            if(cursor == number_of_images-1){
                cursor=-1;
            }
            cursor = cursor+1;
            var mar = cursor*940;
                    $("#innerslider").delay(1000).animate({"margin-left":-mar+"px"}, {duration: 1000, queue: true});

            }, 5000);

Its work is to keep changing the margin-left property of the css, It works fine.
Now I want to make sure that when a certain element on the page is clicked then the above function don’t run till next five seconds. How can I do that ?

Answer 1

Make the handler a named function, and get the handle from starting the interval so that you can stop it and restart it:

function intervalHandler(){
  if(cursor == number_of_images-1){
    cursor=-1;
  }
  cursor++;
  var mar = cursor*940;
  $("#innerslider").delay(1000).animate({"margin-left":-mar+"px"}, {duration: 1000, queue: true});
}

var timer = window.setInterval(intervalHandler, 5000);

$('#someElement').click(function(){
  window.clearInterval(timer);
  timer = window.setInterval(intervalHandler, 5000);
});