setInterval with other jQuery events - Too many recursions

Question

Hello,

I'm trying to build a Javascript listener for a small page that uses AJAX to load content based on the anchor in the URL. Looking online, I found and modified a script that uses setInterval() to do this and so far it works fine. However, I have other jQuery elements in the $(document).ready() for special effects for the menus and content. If I use setInterval() no other jQuery effects work. I finagled a way to get it work by including the jQuery effects in the loop for setInterval() like so:

$(document).ready(function() {
    var pageScripts = function() {
        pageEffects();
        pageURL();      
    }
    window.setInterval(pageScripts, 500);
});

var currentAnchor = null;

function pageEffects() {
    // Popup Menus
    $(".bannerMenu").hover(function() {
        $(this).find("ul.bannerSubmenu").slideDown(300).show;
    }, function() {
        $(this).find("ul.bannerSubmenu").slideUp(400);
    });

    $(".panel").hover(function() {
        $(this).find(".panelContent").fadeIn(200);
    }, function() {
        $(this).find(".panelContent").fadeOut(300);
    });

    // REL Links Control
    $("a[rel='_blank']").click(function() {
        this.target = "_blank";
    });
    $("a[rel='share']").click(function(event) {
        var share_url = $(this).attr("href");

        window.open(share_url, "Share", "width=768, height=450");
        event.preventDefault();
    });
}

function pageURL() {
    if (currentAnchor != document.location.hash) {
        currentAnchor = document.location.hash;
        if (!currentAnchor) {
            query = "section=home";
        } else {
            var splits = currentAnchor.substring(1).split("&");
            var section = splits[0];
            delete splits[0];
            var params = splits.join("&");
            var query = "section=" + section + params;
        }
        $.get("loader.php", query, function(data) {
            $("#load").fadeIn("fast");
            $("#content").fadeOut(100).html(data).fadeIn(500);  
            $("#load").fadeOut("fast");
        });
    }
}

This works fine for a while but after a few minutes of the page being loaded, it drags to a near stop in IE and Firefox. I checked the FF Error Console and it comes back with an error "Too many Recursions." Chrome seems to not care and the page continues to run more or less normally despite the amount of time it's been open.

It would seem to me that the pageEffects() call is causing the issue with the recursion, however, any attempts to move it out of the loop breaks them and they cease to work as soon as setInterval makes it first loop.

Any help on this would be greatly appreciated!

Answer 1

Is your example code copy&paste'ed ? If so, I'm wondering that actually works.

$(this).find("ul.bannerSubmenu").slideDown(300).show;

You are missing the paranthesis after show();

"Too many Recursions." means that your code exceedes the calling stack from a browser. The calling stack does vary in Firefox and different versions of IE. Chrome does not have a calling stack in the same manner so that may explain why it's not happening there.

Anyways, anything within your code does not work fine, I'd suggest to rewrite your timer like so:

$(document).ready(function() {
   (function(){
       pageEffects();
       pageURL(); 
       window.setTimeout(arguments.callee, 500);
   })();              
});

That (at least) makes sure, that pageEffects() and pageURL() can complete before invoking a new Timer. But looking over your code, you should really start from the scratch. You should optimize that like a lot.

Answer 2

I am guessing that the pageEffects need added to the pageURL content.

At the very least this should be more efficient and prevent duplicate handlers

$(document).ready(function() {
   pageEffects($('body'));
   (function(){
       pageURL(); 
       window.setTimeout(arguments.callee, 500);
   })();              
});

var currentAnchor = null;

function pageEffects(parent) {
    // Popup Menus
    parent.find(".bannerMenu").each(function() {
        $(this).unbind('mouseenter mouseleave');
        var proxy = {
            subMenu: $(this).find("ul.bannerSubmenu"),
            handlerIn: function() {
              this.subMenu.slideDown(300).show();
            },
            handlerOut: function() {
              this.subMenu.slideUp(400).hide();
            }
        };
        $(this).hover(proxy.handlerIn, proxy.handlerOut);
    });

    parent.find(".panel").each(function() {
        $(this).unbind('mouseenter mouseleave');
        var proxy = {
          content: panel.find(".panelContent"),
          handlerIn: function() {
            this.content.fadeIn(200).show();
          },
          handlerOut: function() {
            this.content.slideUp(400).hide();
          }
        };
        $(this).hover(proxy.handlerIn, proxy.handlerOut);
    });

    // REL Links Control
    parent.find("a[rel='_blank']").each(function() {
        $(this).target = "_blank";
    });

    parent.find("a[rel='share']").click(function(event) {
        var share_url = $(this).attr("href");

        window.open(share_url, "Share", "width=768, height=450");
        event.preventDefault();
    });
}

function pageURL() {
    if (currentAnchor != document.location.hash) {
        currentAnchor = document.location.hash;
        if (!currentAnchor) {
            query = "section=home";
        } else {
            var splits = currentAnchor.substring(1).split("&");
            var section = splits[0];
            delete splits[0];
            var params = splits.join("&");
            var query = "section=" + section + params;
        }
        var content = $("#content");
        $.get("loader.php", query, function(data) {
            $("#load").fadeIn("fast");
            content.fadeOut(100).html(data).fadeIn(500);  
            $("#load").fadeOut("fast");
        });

        pageEffects(content);
    }
}

Answer 3

Thanks for the suggestions. I tried a few of them and they still did not lead to the desirable effects. After some cautious testing, I found out what was happening. With jQuery (and presumably Javascript as a whole), whenever an AJAX callback is made, the elements brought in through the callback are not binded to what was originally binded in the document, they must be rebinded. You can either do this by recalling all the jQuery events on a successful callback or by using the .live() event in jQuery's library. I opted for .live() and it works like a charm now and no more recursive errors :D.

    $(document).ready(function() {
    // Popup Menus
    $(".bannerMenu").live("hover", function(event) {
        if (event.type == "mouseover") {
            $(this).find("ul.bannerSubmenu").slideDown(300);
        } else {
            $(this).find("ul.bannerSubmenu").slideUp(400);
        }
    });

    // Rollover Content
    $(".panel").live("hover", function(event) {
        if (event.type == "mouseover") {
            $(this).find(".panelContent").fadeIn(200);
        } else {
            $(this).find(".panelContent").fadeOut(300);
        }
    });

    // HREF Events
    $("a[rel='_blank']").live("click", function(event) {
        var target = $(this).attr("href");
        window.open(target, "_blank");
        event.preventDefault();
    });

    $("a[rel='share']").live("click", function(event) {
        var share_url = $(this).attr("href");
        window.open(share_url, "Share", "width=768, height=450");
        event.preventDefault();
    });

    setInterval("checkAnchor()", 500);
});

var currentAnchor = null;

function checkAnchor() {
    if (currentAnchor != document.location.hash) {
        currentAnchor = document.location.hash;
        if (!currentAnchor) {
            query = "section=home";
        } else {
            var splits = currentAnchor.substring(1).split("&");
            var section = splits[0];
            delete splits[0];
            var params = splits.join("&");
            var query = "section=" + section + params;
        }
        $.get("loader.php", query, function(data) {
            $("#load").fadeIn(200);
            $("#content").fadeOut(200).html(data).fadeIn(200);
            $("#load").fadeOut(200);
        });
    }
}

Anywho, the page works as intended even in IE (which I rarely check for compatibility). Hopefully, some other newb will learn from my mistakes :p.