Question

I have a working adding/removing numbers that I just created for showing the number of current page attached to the content slider which is not a feature of the slider ( please take a look http://sneakyrascal.com/coupon2 )

slider changes each content per second when the arrow is clicked but the number will be changed immediately so when the user clicks on it 5 times quickly the content won’t reach the number for example the page may be in the third page but the number is 5!

I’ve tried to use .delay it it didn’t work… is there a way to add to the script so the click won’t be immediate effect on the current number? For example more than one click on the arrow will effect only once per second, that should do the trick I think…

$(function(){
  $(".jcarousel-next-horizontal").click(function(){
    var currentValue = $(".pages").text();
    var five = "5";
    var newValue = parseInt(parseFloat(currentValue)) + 1;
    $(".pages").text(newValue);
    if (currentValue==five) {
      $(".pages").text("5");
    }
  });

  $(".jcarousel-prev-horizontal").click(function(){
    var currentValue = $(".pages").text();
    var newValue = parseInt(parseFloat(currentValue)) - 1;
    var one = "1";
    $(".pages").text(newValue);
    if (currentValue==one) {
      $(".pages").text("1");
    }
  });
});

Answer 1

The easiest way is probably to store the time of the last click and when a new click occurs, compare the current time to the time of the previous click and ignore the click if less than one second has passed since the previous click.

The time can be stored either in a global variable or (probably better) associated with the actual object using jQuery’s data() methods.

For example:

  $(".jcarousel-prev-horizontal").click(function(){
    var currentTime = Date.now();
    var lastClickTime = $(this).data("lastClickTime");
    if (lastClickTime && (currentTime - lastClickTime < 1000)) {
         return(false);   // ignore the click
    }
    $(this).data("lastClickTime", currentTime);   // record time of last click
    var currentValue = $(".pages").text();
    var newValue = parseInt(parseFloat(currentValue)) - 1;
    var one = "1";
    $(".pages").text(newValue);
    if (currentValue==one) {
      $(".pages").text("1");
    }
  });