Question

I’m trying to run a function using setInterval() and click. I want run the function somefunction() only once in every five seconds when i click.

Here is my code:

function somefunction(){ // do something }

setInterval(function(){
  $('#division').one("click",function(){
    somefunction();
  });
}, 5000);

The issue here is, the event setInterval() is queuing up and say after 30 secs the function somefunction(); runs upto 6 times (for 6 clicks).

But I want it to run only once and wait for next 5 seconds.

I have tried .stop(), .dequeue() and .clearqueue() although nothing worked.

Thanks for your help!

Answer 1

How about ignoring every click that has been less than 5 seconds ago?

function somefunction() { /* do something */ }

$('#division').on("click", function () {
  var lastClicked = $(this).data("lastClicked") || 0;

  if (new Date() - lastClicked >= 5000) {
    $(this).data("lastClicked", new Date());
    somefunction();
  }
});

Alternatively, schedule the click in accordance to the last one, ignore all clicks as long as an action is scheduled:

function somefunction() { /* do something */ }

$('#division').on("click", function () {
  var $this = $(this),
      lastClicked = $this.data("lastClicked") || 0,
      isScheduled = $this.is(".scheduled");

  if (!isScheduled) {
    $this.addClass("scheduled");
    setTimeout(function () {
      somefunction()
      $this.removeClass("scheduled").data("lastClicked", new Date());
    }, Math.max(0, 5000 - (new Date() - lastClicked)));
  }
});

See: http://jsfiddle.net/Tomalak/ZXfMQ/1/