0

我的代码有问题，当我在其中调用同一函数的递归调用时，某些代码不起作用。它必须与myGalleria = Galleria.get(0);，但我不知道如何使它全部工作。

文档就绪（仅在我第一次调用函数时显示，第一次一切正常）

$(document).ready(function(){
    $.getJSON('getImages.php', {
        cat: "123"
    }, function(imgData){
        createGallery(imgData);
    });
});

现在函数本身，请注意，当我单击.galleria-menuButtons span调用相同的函数时，没有任何工作，画廊本身正在创建，但没有别的。

function createGallery(imgData){

    $("#gallery").galleria({
        image_margin: 30,
        clicknext: true,
        transition: "fade",
        dataSource: imgData
    });

    myGalleria = Galleria.get(0); // I don't think this works after recursive call

    // Adding menu and menu buttons
    myGalleria.addElement("menu").appendChild("container", "menu");
    myGalleria.addElement("menuButtons").appendChild("menu", "menuButtons");
    $.ajax({
        url: "menuButtons.php",
        success: function(data){
            myGalleria.$("menuButtons").html(data);
        }
    });

    // Menu button click events
    $('.galleria-menuButtons span').live('click', function(){
        alert(this.id);
        // Getting jSon data
        $.getJSON('getImages.php', {
            cat: this.id
        }, function(imgData) {
            alert(imgData);
            createGallery(imgData); // <- Recursive call
        });
    });
}

我在 window.resize 上有类似的功能，它在递归调用后也不起作用。

$(window).resize(function(){
    $(".galleria-container").css("width", $(window).width());
    $(".galleria-container").css("height", $(window).height());
    galleriaRescale = Galleria.get(0);
    galleriaRescale.rescale(); // <- this is not working either
    //sizeBG();
});
4

1 回答 1

3

仅供参考 - 这实际上不是传统意义上的递归，因为您是createGallery从一个单击处理程序调用的，该处理程序启动一个 JSON 请求，然后createGallery在成功时调用，这两者都将在上一次调用createGallery完成后发生。

但是您确实有幸存的函数闭包，这可能会使事情变得混乱或导致问题。一种猜测是，您可能希望确保您期望的事物是局部变量（例如在它们前面myGalleria有一个var，因此它们确实是局部变量，而不是可能范围更高并受先前化身影响的变量此呼叫或正在影​​响尚未完成的较早呼叫。

var myGalleria = Galleria.get(0);

然后，假设imgData是某种数据结构，如数组或对象，您必须确保该数据结构只有一个永远不会更改的全局版本，或者每次调用都createGallery具有该数据结构的适当单独副本。如果它在此过程中发生变化，那么后续调用createGallery可能无法获得他们想要的数据。如果它是一个只读数据结构（你不改变它），那么你可能对那个没问题。

好的，让我们通过伪代码来讨论它的作用。

  1. 在页面准备就绪时，您将获得一些 JSON 图像数据。
  2. 成功后，您将createGallery使用该图像数据进行调用。
  3. createGallery 调用在 DOM 中执行某种操作（可能是动画）
  4. 然后它调用：myGalleria = Galleria.get(0); 因为myGalleria前面没有var，这是一个全局变量声明（递归和闭包的坏消息）
  5. 然后使用 myGalleria 数据结构对 DOM 进行一些更改（添加菜单和菜单项）。
  6. 然后，您在一组非常通用的 CSS 类上添加一个 .live 点击处理程序（您可能在此处多次添加此点击处理程序）。
  7. 然后，您再次获取一些 JSON 图像数据。
  8. 获取该图像数据后，您可以通过调用重新开始整个过程createGallery​​。

概括

我看到的两个潜在问题是这myGalleria不是局部变量，可能应该是，并且您可能正在添加重复的点击处理程序。

如果这些都不能完全解决问题，那么我们可能需要更多关于Galleria.get(0)正在做什么的信息。

仅供参考，调整大小的 clickHandler 看起来可能与不使用 var 使您的变量声明成为局部变量有相同的问题。

第二轮

好的，这里还有一些观察。

  1. 当您使用此代码块添加菜单和菜单按钮时，您没有为 addElement 或 appendChild 函数提供任何唯一标识符（您为两者提供了“menu”和“menuButtons”）。因此，我不知道您如何在随后的点击事件中唯一地连接到​​它们。就您的代码而言，所有菜单项看起来都相同，并且没有一个具有唯一状态。我不知道 Galleria 代码，但我认为必须有人为这些新项目创建唯一标识符，以便您可以在后续的点击处理程序中唯一标识它们。

    // Adding menu and menu buttons myGalleria.addElement("menu").appendChild("container", "menu"); myGalleria.addElement("menuButtons").appendChild("menu", "menuButtons");

  2. 当您设置一个点击处理程序来大概处理这些菜单项的点击时，您每次都使用完全相同的 CSS 选择器，因此这个点击处理程序不可能被唯一地分配给新创建的菜单项（这就是我假设你想要的）。我不知道 Galleria 代码，但我假设您应该为新创建的菜单项创建某种唯一 ID，将其传递给 addElement 和 appendChild，然后在安装单击处理程序时引用该唯一标识符。同样，此函数需要仅针对您使用唯一标识符创建的菜单按钮myGalleria.$("menuButtons").html(data);

  3. 最后，我建议您更改其中一个变量的名称以避免混淆。在您的单击处理程序中，将出现的三个 更改imgData为 just data，这样就不会混淆闭包和 imgData 的值。

第三轮

最终的修复之一是（嵌入在评论中）：

我认为如果您只在 createGallery 函数之外安装一次 .live 点击处理程序而不是每次都调用它，它可能会起作用。由于它是 .live ，它将自动适用于您创建的所有未来按钮，因此您应该只调用一次。我建议把它放在 $(document).ready 功能块中。

于 2011-07-08T18:17:24.910 回答