Javascript prevent click while processing a function

Question

I'm new to Javascript, please bear with me.

I have a code similar to the one below, whenever I click a button, it performs some animation on a HTML element, problem is, if the user clicks multiple times, the animation will be buffered and executed with a huge delay all at once.

The code below "should" solve the problem by disabling the loop until the animation completes, but it doesn't. I can not change the code's structure too much, it must stay in this form more or less.

var processing = false;

$("p").click(function() {
  if (processing == false) {
    for (i=0; i<5; i++) {
      if (processing == false)
        processing = true;
      tastor();
    }
    processing = false;
  }
});


function tastor() {
  zubi = parseFloat($('p').css('font-size'));
  $('p').animate({'font-size': zubi+i}, 500);
}

Have you looked at api.jquery.com/stop at all?

VictorKilo
– VictorKilo

2012-09-10 21:25:20 +00:00
Commented Sep 10, 2012 at 21:25 — VictorKilo
– VictorKilo, Commented Sep 10, 2012 at 21:25
For reference, this video covers animation queues.

Whymarrh
– Whymarrh

2012-09-10 21:25:30 +00:00
Commented Sep 10, 2012 at 21:25 — Whymarrh
– Whymarrh, Commented Sep 10, 2012 at 21:25

Blender · Accepted Answer · 2012-09-10 21:24:47Z

5

You can use the :animated jQuery pseudo-selector to break out early in case the element is already animating:

$("p").click(function() {
  if ($(this).is(':animated')) return;

  // The rest of your normal code.
});

Demo: http://jsfiddle.net/MgmET/4/

answered Sep 10, 2012 at 21:24

Blender

300k55 gold badges462 silver badges511 bronze badges

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

Comments

Bubbles · Accepted Answer · 2012-09-10 21:38:48Z

"animate" may start an event lasting half a second, but it does not actually take half a second to execute. So, each "tastor" call per click will execute quite quickly, before the next click happens.

One way to fix this would be to rely on the "complete" property of animate. You can pass a function to animate that will not execute until the animation has finished. For example:

var processing = false;
var increment = 1;
function step (count) {
    if (count > 0) {
        tastor(function() { step(count - 1) });
    } else {
        processing = false;
    }
}
$("p").click(function() {
    if (processing == false) {
        processing = true;
        step(5);
    }
});
function tastor(callback) {
    zubi = parseFloat($('p').css('font-size'));
    $('p').animate({'font-size': zubi+increment}, 500, callback);
}

Collectives™ on Stack Overflow

Javascript prevent click while processing a function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related