Question

我有一个带有图片库（“投资组合”）页面的网站。有一个下拉导航，允许用户从网站上的任何页面查看投资组合中的特定图像。导航中的链接使用散列，并且读取该散列并将其转换为图像文件名的字符串。然后将/ portfolio / page上的image src属性与新的图像文件名交换出来。

如果我点击/ portfolio / page本身以外的页面的下拉链接，这样可以正常工作。但是，如果我从/ portfolio / page采取相同的操作，我在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");
});

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

$("#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（）触发并在那里的某个地方进行recurses。您是否尝试在调试器中查看callstack？在它反弹的方法之间应该变得非常明显。

勒

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

1 个答案: