的setInterval與其他jQuery的事件 - 太多的遞歸

Question

我試圖建立一個Javascript監聽器使用AJAX基於URL的錨加載內容的小頁面。在線看，我找到並修改了一個腳本，使用setInterval()來做到這一點，迄今爲止它的工作正常。但是，我在$(document).ready()中爲菜單和內容的特殊效果提供了其他jQuery元素。如果我使用setInterval()，則不能使用其他jQuery效果。我finagled一種方式來獲得它通過在循環中的jQuery效果爲setInterval()，像這樣的工作：

$(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"); 
     }); 
    } 
} 

也能正常工作一段時間，但在加載頁面的幾分鐘後，它拖動到近停止在IE和Firefox。我檢查了FF錯誤控制檯，並返回一個錯誤「太多的遞歸。」 Chrome瀏覽器似乎並不在意，儘管它已經打開了很多時間，但頁面仍能正常運行。

在我看來，pageEffects()調用導致了遞歸問題，但是，任何試圖將其移出循環的嘗試都會中斷它們，並且只要setInterval首次循環就會停止工作。

任何幫助，將不勝感激！

Answer 1

感謝您的建議。我嘗試了其中的一些，但仍未達到理想的效果。經過一些謹慎的測試後，我發現發生了什麼事。與jQuery（大概JavaScript作爲一個整體），每當一個AJAX回調製成，通過回調帶來的元素是不能綁定到什麼文件中最初綁定，必須rebinded。您可以通過回顧上一個成功的回調所有的jQuery的事件或在jQuery的庫使用.live()事件做到這一點。我選擇了.live()和它的工作原理就像現在的魅力並沒有更多的遞歸錯誤：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，即使在IE瀏覽器（我很少檢查兼容性）頁面的工作原理。希望其他一些newb能從我的錯誤中學習：p。

Answer 2

我猜測的pageEffects需要加入PAGEURL內容。

至少，這應該更有效率和防止重複處理

$(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); 
    } 
}