javascript click event queue

Question

I made a simple gallery where when you click on a image thumb nail, it will show the larger image with fade in fade out effect with jquery.

$('#thumnail').click(function(){
  $('#piccontainer').fadeOut(function(){
      $('#piccontainer').html('<div> <img src="' + imgsource + '"  /> </div>');
  });

  $('#piccontainer').fadeIn();
});

but if i click on a 5 different thumbnails quickly, the large image will fade in fade out for all 5 images. How can I disable so that lets say i clicked on 5 thumbnails very quickly, it should only fadein the last 5th one. basicaly how can i stop the queue of the click events?

thanks for the help.

.bind will ensure that quick clicks dont get registered until an action is finished api.jquery.com/bind — s_p
– s_p, Commented Mar 8, 2012 at 19:15
i tried the bind, same result. where would i add stop? in this case — rajmoney
– rajmoney, Commented Mar 8, 2012 at 19:20

Story Teller · Accepted Answer · 2012-03-08 19:14:11Z

1

Take a look at - http://api.jquery.com/queue/

answered Mar 8, 2012 at 19:14

Story Teller

4371 gold badge4 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dhaval · Accepted Answer · 2012-03-08 19:23:40Z

0

You could use timeout like this to avoid multiple clicks. Again this is possible to avoid clicks for a small amount of time and not longer.

http://jsfiddle.net/dhavaln/Z7w84/

answered Mar 8, 2012 at 19:23

dhaval

7,6493 gold badges32 silver badges38 bronze badges

1 Comment

rajmoney Over a year ago

i'm sure this is a common issue and must be dealt many times.

Oriol · Accepted Answer · 2015-11-19 22:14:22Z

0

Add this condition at the top of the function:

if ($('#piccontainer').is(":animated")) {
  return false;
}

See Demo

answered Nov 19, 2015 at 22:14

Oriol

13k5 gold badges40 silver badges38 bronze badges

Collectives™ on Stack Overflow

javascript click event queue

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related