掌握jQuery的阿贾克斯不需要的GET请求的负载

Question

这是我目前所面对的工作演示： http://isaaclean.com/test/test2

基本上，如果你点击“博客”中的主导航栏，第二栏旁边将Ajax加载包含“帖子”列表的“blog.html”。如果您点击第二列中的其中一个帖子，则第三列将加载该帖子的内容。

虽然工作正常，但如果再次单击“Blog”，这就是脚本出现故障的地方。 Firebug在第二列显示超过20个GET请求。然后，当你点击第二列中的链接后，发送等量的GET请求。你甚至可以看到动画变得疯狂。我不知道为什么会发生这种情况。

它开始时，我加入以下行mainnav.js发生：

if($('#listnav').children().size() == 1) { 
     $('#listnav nav li').stop().hide("slide", {direction: "left"}, loadContent); 
    } else { 
     $('#listnav').load(toLoad, '', showNewContent); 
    } 

为什么我说这是因为我想要的脚本阿贾克斯之前，充分展现滑出动画之所以加载另一个blog.html当第二次点击“博客”时。在实现上面的代码和loadContent函数之前，问题在于滑动输出动画被页面加载切断。为了防止这种情况发生，我认为使用回调函数是可行的，因为动画完成后会发生回调。

唯一的问题是，如果你第一次加载页面#listnav没有子元素。因此，如果您尝试使用下面的代码：

$('#listnav nav li').stop().hide("slide", {direction: "left"}, loadContent); 

...永远不会执行回调函数，因为直到你点击没有导航li元素“博客”。这就是为什么我试图实现一个if语句来检查#listnav中是否有元素，并且它在第一次点击时工作正常，但脚本之后的任何点击都会出错。

所以任何人都可以帮我找到解决这个问题的方法吗？

Answer 1

我相信你的问题是mainnav.js中的loadcontent（）会为它动画的每个节点运行一次。我不完全知道你看到的效果究竟是如何发生的，但这肯定是根本原因。

我不能对此进行测试目前所以这是未经测试，但这些方针的东西应该工作：

$('#listnav nav li').stop().hide("slide", {direction: "left"}); 
$('#listnav nav li').last().hide(0, loadcontent); 

注意loadcontent是初始动画不再一部分，但只有一次的最后一个节点执行被隐藏...虽然，我不确定这段代码是否真正起作用，因为我找不到简单排队自定义函数的方法。 jQuery效果不是我的一杯茶。

但是，当我仔细想想，或许这仅仅是一个更好，更强大的解决方案：

function loadContent() { 
    if ($('#listnav nav li:visible').length == 0) { 
     $('#listnav').load(toLoad, '', showNewContent); 
    } 
}