5277 posts The Dude Abides
  • United States
  • Exclusive Author
  • Has been a member for 5-6 years
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Bought between 100 and 499 items
  • Referred between 100 and 199 users
+5 more
CodingJack says

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

5074 posts
  • Australia
  • Bought between 100 and 499 items
  • Community Superstar
  • Exclusive Author
  • Has been a member for 3-4 years
  • Interviewed on the Envato Notes blog
  • Microlancer Beta Tester
  • Referred between 1 and 9 users
  • Sold between 1 000 and 5 000 dollars
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
  • Exclusive Author
  • Has been a member for 3-4 years
  • Sold between 10 000 and 50 000 dollars
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.

5542 posts
  • Exclusive Author
  • Author had a File in an Envato Bundle
  • Elite Author
  • Has been a member for 5-6 years
  • Sold between 100 000 and 250 000 dollars
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • India
+3 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!

5277 posts The Dude Abides
  • United States
  • Exclusive Author
  • Has been a member for 5-6 years
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Bought between 100 and 499 items
  • Referred between 100 and 199 users
+5 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
  • Exclusive Author
  • Has been a member for 3-4 years
  • Sold between 10 000 and 50 000 dollars
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 :)

5277 posts The Dude Abides
  • United States
  • Exclusive Author
  • Has been a member for 5-6 years
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Bought between 100 and 499 items
  • Referred between 100 and 199 users
+5 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.
5277 posts The Dude Abides
  • United States
  • Exclusive Author
  • Has been a member for 5-6 years
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Bought between 100 and 499 items
  • Referred between 100 and 199 users
+5 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?

5277 posts The Dude Abides
  • United States
  • Exclusive Author
  • Has been a member for 5-6 years
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Bought between 100 and 499 items
  • Referred between 100 and 199 users
+5 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.

5277 posts The Dude Abides
  • United States
  • Exclusive Author
  • Has been a member for 5-6 years
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Bought between 100 and 499 items
  • Referred between 100 and 199 users
+5 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