使用 jQuery Ajax 获取大量不需要的 GET 请求

Question

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

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

虽然这工作正常，但如果您再次单击“博客”，脚本就会变得混乱。 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);
    }

原因我添加此内容的原因是，当第二次单击“博客”时，我想在脚本 Ajax 加载另一个 blog.html 之前显示完整的滑出动画。在我实现上面的代码和loadContent函数之前，问题是滑出动画被页面加载切断。为了防止这种情况，我认为使用回调函数会起作用，因为回调是在动画完成后发生的。

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

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

...回调函数永远不会执行，因为在您单击“博客”之前没有 nav 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);
    }
}