Return function multiple times instead of one time using .fadeOut();

Question

I don't know if it is suppoused to do this, but I guess it is...

I thought at first that it may be something wrong with my whole script and I managed to make new file on localhost and test just fadeOut(); function.

Apparently it returned function twice again so I went to jsfiddle to check what will happen there. And same thing happened. In this case console.log(); returned twice.

What I did and what I am trying to do ?

Well I want to return specified function, or in fiddle sample, specified console.log(); only once. However I am fadingOut multiple elements (two, to be exact).

Is there any way to do that, instead of duplicating each element to fadeOut at the same time ?

Sample that will return console.log(); twice.

setTimeout(function () {

    $( ".one, .two" ).fadeOut(300, function () {
        console.log("Return Function!");
    });

}, 2000);

Sample that will return console.log(); once.

setTimeout(function () {

    $( ".one" ).fadeOut(300);

    $( ".two" ).fadeOut(300, function () {
        console.log("Return Function!");
    });

}, 2000);

Fiddle Preview: Fiddle Redirect

Can you provide your HTML? (you are selecting elements by class, are you sure that only one element is assigned with that class?) — Marcelo Myara, Sep 24 '13 at 19:01
Alright, so any way to fix it so it call function once on fade of multiple elements ? — dvlden, Sep 24 '13 at 19:02
possible duplicate of [Callback of .animate() gets called twice jquery](http://stackoverflow.com/questions/8790752/callback-of-animate-gets-called-twice-jquery) — Kevin B, Sep 24 '13 at 19:03
@NenaddvL, simple use of a flag to log it (or to do whatever else you want) one time only... Just remember to use a flag with scope that reaches outside the function itselfs. — Marcelo Myara, Sep 24 '13 at 19:05

score 5 · Accepted Answer · answered Sep 24 '13 at 19:02

5

There are two elements in the collection, so fadeOut is called twice, so yes, it's supposed to do that.

You can have the callback fire only once regardless of the number of elements in the collection by using the returned promise from the animation and $.when and $.then

setTimeout(function () {

    $.when( $( ".one, .two" ).fadeOut(300) ).then(function () {
        console.log("Return Function!");
    });

}, 2000);

FIDDLE

answered Sep 24 '13 at 19:02

adeneo

312,895
29
395
388

1

Note that you could also simply do `$( ".one, .two" ).fadeOut(300).promise().done(function(){...` same concept – Kevin B Sep 24 '13 at 19:04
To fire the log when everything's done? Absolutely..! Like it! – Chris Kempen Sep 24 '13 at 19:05
@KevinB - Indeed you can, I always tend to use `when` and `then` with animations as it seems to make more sense to me when doing complex animation stuff. – adeneo Sep 24 '13 at 19:06
@adeneo this is great... Never used $.when and .then before. Well, thank you this is perfect. – dvlden Sep 24 '13 at 19:07

score 3 · Answer 2 · answered Sep 24 '13 at 19:02

Perhaps a simple flag would suffice? Especially if you wanted to log to the console as soon as the first one was done (for whatever reason):

var already_returned = false;
setTimeout(function () {
    $( ".one, .two" ).fadeOut(300, function () {
        if (!already_returned) {
            already_returned = true;
            console.log("Return Function!");
        }
    });
}, 2000);

score 0 · Answer 3 · answered Sep 24 '13 at 19:03

0

Need to see your HTML, but appears to me that you may have more than one element assigned with the class "two" - that would explain why in the second example you would outcome 2 log lines...

In the first example, you may (and probably is) selecting 2 elements (one with the class "one" and another with the class "two").

answered Sep 24 '13 at 19:03

Marcelo Myara

2,841
2
27
36

So, in this case, it's even easier... First selection got two elements (one assigned with class "one" and other with class "two") and second selections got only one element with class "two". – Marcelo Myara Sep 24 '13 at 19:08

score 0 · Answer 4 · answered Sep 24 '13 at 19:06

I checked this out of curiosity and my console shows two different javascript declarations:

Return Function! fiddle.jshell.net/dvLden/ApUYq/show/:38
Return Function! fiddle.jshell.net:38

Apparently fiddle runs this twice. if you browse to http://fiddle.jshell.net/dvLden/ApUYq/show/:38 you'll get only one "Return Function" in your console.

Return function multiple times instead of one time using .fadeOut();

4 Answers4