execute function not more than one time

Question

I wrote the code shown below to call lightbox show and callback some function, for example function_a, but it will fire 16 times.

How can I make it fire only once?

$("#open").click(function(){ $('.a, .b, .c, .d').fadeOut(600,function(){ $('.e, .f, .g, .h').fadeIn(400,function(){ function_a(); }); }); }); function_a(){ console.log('fire') };

when do you want it fired? When the last fadeOut completes? When the first one does? — John Dvorak
– John Dvorak, Commented Jul 15, 2013 at 9:37
Why is it firing 16 times? Are you using the #open several times? — Jonathan Römer
– Jonathan Römer, Commented Jul 15, 2013 at 9:38
Well the best way would be bug-fix to stop it firing 16 times, but you could also just add a count variable and check it is 0 before firing — Lotok
– Lotok, Commented Jul 15, 2013 at 9:38
I know if I put in $('.a, .b, .c, .d').fadeOut() callback will fire 4 times, I guess maybe because it select 4 item fadeout than call fire 4 times. — user1575921
– user1575921, Commented Jul 15, 2013 at 9:39

David Hellsing · Accepted Answer · 2013-07-15 09:51:11Z

You can use $.fn.promise, f.ex:

$("#open").click(function(){ $('.a, .b, .c, .d').fadeOut(600).promise().done(function(){ $('.e, .f, .g, .h').fadeIn(400).promise().done(function(){ function_a(); }); }); });

From the docs:

The .promise() method returns a dynamically generated Promise that is resolved once all actions of a certain type bound to the collection, queued or not, have ended.

Also note that classNames must be at least 2 characters long.

asifsid88 · Accepted Answer · 2013-07-15 09:38:02Z

This is because you may have 16 elements which class having those specified
Have a variable to keep the track of it

$("#open").click(function(){ var iCount=0; $('.a, .b, .c, .d').fadeOut(600,function(){ $('.e, .f, .g, .h').fadeIn(400,function(){ if(iCount==0) function_a(); iCount++; }); }); });

Pash Shocky · Accepted Answer · 2013-07-15 09:44:39Z

try this:

var fired = 0; $("#open").click(function(){ $('.a, .b, .c, .d').fadeOut(600,function(){ $('.e, .f, .g, .h').fadeIn(400,function(){ if (fired < 1) function_a(); fired ++; }); }); }); function_a(){ console.log('fire') };

Collectives™ on Stack Overflow

execute function not more than one time

3 Answers 3

1 Comment

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Related