5358 posts The Dude Abides
  • Located in United States
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $125,000+ on Envato Market
  • Has been part of the Envato Community for over 5 years
+9 more
CodingJack says

Related to performance – if you haven’t already, check out the “FPS counter” in Chrome’s “about:flags”. Totally awesome!

5492 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Located in Australia
  • Has sold $1,000+ on Envato Market
+4 more
Australia says

Related to performance – if you haven’t already, check out the “FPS counter” in Chrome’s “about:flags”. Totally awesome!

Sweet, thanks for that.

42 posts
  • Has been part of the Envato Community for over 4 years
  • Has sold $10,000+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
maguiar01 says


You’re asking if will be created 5 copies of the function code in the memory?
yes :)

Well, in this case the answers is “no”. The function passed to the “each” method is created only once, and this instance is applied to all elements in the jquery set, one by one.

6023 posts
  • Sells items exclusively on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $125,000+ on Envato Market
  • Has been part of the Envato Community for over 6 years
+8 more
VF says

Well, in this case the answers is “no”. The function passed to the “each” method is created only once, and this instance is applied to all elements in the jquery set, one by one.

Thanks for the info, that’s nice!

5358 posts The Dude Abides
  • Located in United States
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $125,000+ on Envato Market
  • Has been part of the Envato Community for over 5 years
+9 more
CodingJack says


Well, in this case the answers is “no”. The function passed to the “each” method is created only once, and this instance is applied to all elements in the jquery set, one by one.
Thanks for the info, that’s nice!

+1 So this is just passing a single function as an argument. Great to know :) And I assume the same applies for adding event listeners? (although I generally wouldn’t use an anonomous function for event listeners so they could be explicitly removed later, but would still be good info to know).

Also, I probably should have used the word “anonomous” instead of “nesting” for the title of the thread. (still learning the jargon as these concepts are completely foreign to someone coming from AS3 :D )

42 posts
  • Has been part of the Envato Community for over 4 years
  • Has sold $10,000+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
maguiar01 says

+1 So this is just passing a single function as an argument. Great to know :) And I assume the same applies for adding event listeners? (although I generally wouldn’t use an anonomous function for event listeners so they could be explicitly removed later, but would still be good info to know).

Yes, the same applies when adding event listeners.

Now, just to make things clear: when this code below is executed

element.each(function() { // do something });

only one function is created. But this other code you posted:

for(var i = 0; i < maxSubs; i++) {
    ul = ul.children("li").children("ul").each(function() {
        st = i % 2 === 0 ? "light" : "dark";
        $(this).addClass(st + "-sub").prepend($("<div />").addClass("nav-arrow " + st + "-arrow"));
    });
}

This code it will create maxSubs different functions, 1 for each step in the for loop.


Also, I probably should have used the word “anonomous” instead of “nesting” for the title of the thread. (still learning the jargon as these concepts are completely foreign to someone coming from AS3 :D )

Yeah, that would be clearer ;), but that’s OK :)

5358 posts The Dude Abides
  • Located in United States
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $125,000+ on Envato Market
  • Has been part of the Envato Community for over 5 years
+9 more
CodingJack says

After giving this some more thought, I think the best practice is to never pass anonymous functions for .each and .bind unless retaining variable scope is absolutely necessary.

Technically, if you know something will only be executed once, like inside an “init” function, an anonymous function is harmless, but it’s probably still good to get in the habit of not doing it. Because when you consider this example:

function mouseEventThatFiresMultipleTimes(event) {

    $(this).each(function() { /* anonomous */ });

}

every time this event fires, a new object is created in memory.

Whereas in this example:

function mouseEventThatFiresMultipleTimes(event) {

    $(this).each(notAnonymous);

}

function notAnonymous() {};

the “notAnonymous” function is only created once in memory throughout the script’s life-cycle. So this should be best practice for the following reasons:

  1. Performance: Reduces the chance of creating unnecessary objects.

  2. Re-usability: Maybe the function can be used in another .each elsewhere in the script. But even if this isn’t the case, it still provides more flexibility for someone else to build upon later.

  3. It’s cleaner and therefore easier to read.
5358 posts The Dude Abides
  • Located in United States
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $125,000+ on Envato Market
  • Has been part of the Envato Community for over 5 years
+9 more
CodingJack says

only one function is created. But this other code you posted:

for(var i = 0; i < maxSubs; i++) {
    ul = ul.children("li").children("ul").each(function() {
        st = i % 2 === 0 ? "light" : "dark";
        $(this).addClass(st + "-sub").prepend($("<div />").addClass("nav-arrow " + st + "-arrow"));
    });
}

This code it will create maxSubs different functions, 1 for each step in the for loop.

So not optimal, but necessary because the anonymous function needs to use the iterated “i” value from the for-loop. Unless there’s a better way to pass that value?

5358 posts The Dude Abides
  • Located in United States
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $125,000+ on Envato Market
  • Has been part of the Envato Community for over 5 years
+9 more
CodingJack says


only one function is created. But this other code you posted:

for(var i = 0; i < maxSubs; i++) {
    ul = ul.children("li").children("ul").each(function() {
        st = i % 2 === 0 ? "light" : "dark";
        $(this).addClass(st + "-sub").prepend($("<div />").addClass("nav-arrow " + st + "-arrow"));
    });
}

This code it will create maxSubs different functions, 1 for each step in the for loop.

So not optimal, but necessary because the anonymous function needs to use the iterated “i” value from the for-loop. Unless there’s a better way to pass that value?

The above code block re-written to avoid the anonymous function :)

var ul, j, st, maxSubs = 4;

for(var i = 0; i < maxSubs; i++) {

    ul = ul.children("li").children("ul");

    j = ul.length;

    while(j--) theEach(i, ul[j]);

}

function theEach(i, itm) {

    st = i % 2 === 0 ? "light" : "dark";

    $(itm).addClass(st + "-sub").prepend($("<div />").addClass("nav-arrow " + st + "-arrow"));

}

When you think about it, jQuery’s .each() is limiting because it prevents you from passing custom arguments to the function. And instead you’re bound to the default argument (the increment iteration). But if we dump the .each(), we get more flexibility and aren’t bound to a specific set or arguments and instead can pass whatever the hell we want. With the bonus of course being that we can avoid anonymous function usage.

I don’t see any extra leg work involved in this approach compared to the .each(). Maybe someone can correct me.

5358 posts The Dude Abides
  • Located in United States
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $125,000+ on Envato Market
  • Has been part of the Envato Community for over 5 years
+9 more
CodingJack says

Man I’m having some breakthroughs tonight :D

Just took a look at jQuery and it IS possible to pass custom arguments to the .each() function!


// 3 divs in the document

$(document).ready(function() {

    var object = {prop: "value"}, st = "";

    for(var i = 0; i < 5; i++) {

        st += "A " 

        $("div").each(fire, [st, object]);

    }

    function fire(str, obj) {

        console.log(str);
        console.log(obj.prop);

    }

});

/* LOGS

A
value
A
value
A
value
A A
value
A A
value
A A
value
A A A
value
A A A
value
A A A
value
A A A A
value
A A A A
value
A A A A
value
A A A A A
value
A A A A A
value
A A A A A
value

*/

So forget about needing to preserve variable scope! Which means there should never be a reason to write an anonymous function for the .each() method.

Now the question is can we get custom args in events? Going to do some research on custom events because I think it’s possible. Then there will be NO reason to EVER use an anonymous function :D

by
by
by
by
by
by