Is jQuery Infinite nesting bad for performance?

Question

// page load 
InitTeacherLinks()

function InitTeacherLinks()
{
    $(".open-ungraded-test").click(function()
    {
        $.post("class_viewer.php", {
            _open_lesson_direct : 1
        }, function(data)
        {
            $("#content_display").html(data);
             InitGradingActions(test_taken_id); // Notice this Call

        });

    })

}

function InitGradingActions(test_taken_id)
{

    $("#save_grading").click(function()
    {
        $.post("class_viewer.php", {
            _save_graded_test : 1

        }, function(data)
        {
            $("#content_display").html(data);
            InitTeacherLinks(); // Is this Circular logic?
        });
    });

}

Basically, I have a div called content_display that shows a list of tests. After I load it full of tests, I have to make each test link clickable. So I do that in this function: InitTeacherLinks() where they can view an individual test.

Well the user can exit the test and go back to the original test list. So I have to call the parent function again in the child function.

While this DOES work, I notice I do it often. Is this bad logic or bad for performance?

Note: I can only think of one possible reason why this may work. Please correct me if I am wrong. when save_grading is clicked, it effectively destroys reference to the original (parent function) so rather than creating a duplicated reference, we are simply reinitialize it. Is this right?

score 1 · Answer 1 · answered Jun 12 '14 at 16:03

1

I don't think there's a stack overflow issue with the code, but it does look like there may be an error. Every time InitTeacherLinks() is executed, a new click handler is assigned to .open-ungraded-test. That means there is an additional ajax post made during that click for every time InitTeacherLinks() is run, which could be a lot.

At least that's how it looks from the code. This could depend on the structure of your document.

answered Jun 12 '14 at 16:03

recursive

83,943
34
151
241

Well when `open-ungraded-test` is clicked it essentially wipes that element out. Does that reset the click handler or is it still there even though element is gone? – TheLettuceMaster Jun 12 '14 at 16:05
1

If those elements are removed from the dom, then the handlers are removed with them. That won't be a problem. Sorry I missed that. – recursive Jun 12 '14 at 16:26
If that is the case, and there is no stack overflow, I guess the code above is correct. – TheLettuceMaster Jun 12 '14 at 16:27

score 0 · Answer 2 · answered Jun 18 '14 at 14:14

I ended up not changing anything and went with what I have above.

Because the click events are unbinded every time the element is destroyed, this was not creating an endless loop (or Stackoverflow error) which was my concern. The code in the question is correct.

Is jQuery Infinite nesting bad for performance?

2 Answers2