Nesting function question

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

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

Sweet, thanks for that.

CodingJack said

maguiar01 said
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.

maguiar01 said
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!

VF said

maguiar01 said
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 )

CodingJack said
+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.

CodingJack said
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 )

Yeah, that would be clearer , but that’s OK

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.

maguiar01 said

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?

CodingJack said

maguiar01 said

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.

Man I’m having some breakthroughs tonight

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