“递归太多”使用哈希加载同一页面时出错

Question

我有一个带有图片库（“作品集”）页面的网站。有下拉导航，允许用户从网站上的任何页面查看投资组合中的特定图像。导航中的链接使用哈希值，该哈希值被读取并转换为图像文件名的字符串。然后，/portfolio/ 页面上的图像 src 属性将被替换为新的图像文件名。

如果我从 /portfolio/ 页面本身以外的页面单击下拉链接，则效果很好。但是，如果我从 /portfolio/ 页面执行相同的操作，我会在 Firefox 中收到“太多递归”错误。这是代码：

导航标记的片段：

<li>Portfolio Category A
  <ul>
      <li><a href="/portfolio/#dining-room-table">Dining Room Table</a></li>
      <li><a href="/portfolio/#bathroom-mirror">Bathroom Mirror</a></li>

  </ul>
</li>

读取哈希值、将其转换为图像文件名并交换页面上的图像的 JS：

$(document).ready(function()
{
    if(location.pathname.indexOf("/portfolio/") > -1)
        {
            var hash = location.hash;
            var new_image = hash.replace("#", "")+".jpg";
            swapImage(new_image);
        }
});

function swapImage(new_image)
{
    setTimeout(function()
    {
        $("img#current-image").attr("src", "/images/portfolio/work/"+new_image);
    }, 100);
}

我使用 setTimeout 函数，因为我在制作之前淡出旧图像我最初认为这是导致递归错误的函数，但是当我删除 setTimeout 时，我仍然遇到这个问题。

这是否与我不知道的关闭有关？我对倒闭很不感冒。

监听导航点击的 JS：

$("nav.main li.dropdown li ul li").click(function()
{
    $(this).find("a").click();
    $("nav.main").find("ul ul").hide();
    $("nav.main li.hover").removeClass("hover");
});

我还没有实现下拉导航的淡入/淡出功能，但我已经为下一个和上一个箭头实现了它，它也可以用于使用相同的方法交换图像交换图像函数。这是代码：

$("#scroll-arrows a").click(function()
{

    $("#current-image").animate({ opacity: 0 }, 100);

    var current_image = $("#current-image").attr("src").split("/").pop();
    var new_image;
    var positions = getPositions(current_image);

    if($(this).is(".right"))
    {
        new_image = positions.next_img;
    }
    else
    {
        new_image = positions.prev_img;
    }

    swapImage(new_image);

    $("#current-image").animate({ opacity: 1 }, 100);

    return false;
});

这是我在 Firefox 中遇到的错误：

too much recursion
var ret = handleObj.handler.apply( this, arguments );
jquery.js (line 1936)

感谢您的建议。

Answer 1

我假设点击链接也会触发对您观察到的 UL / LI 的点击，并在其中执行（另一次）点击锚点，这会再次触发您的观察者，依此类推。每次 /portfolio/ 被重新加载，ready() 被触发，并且它会在其中的某个地方递归。您是否尝试过在调试器中查看调用堆栈？它在哪些方法之间反弹应该变得非常明显。

勒内