Question

以下是我目前所做工作的演示： http://isaaclean.com/test/test2

基本上，如果您单击主导航栏中的“博客”，其旁边的第二列将加载“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”时加载另一个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);
    }
}

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

1 个答案: