jQuery 递归

Question

我的代码有问题，当我在其中递归调用同一函数时，某些代码不起作用。它必须与 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();
});

Answer 1

仅供参考 - 这实际上并不是传统意义上的递归，因为您从点击处理程序调用 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 代码，但我假设有人必须为这些新项目创建唯一标识符，以便您可以在后续点击处理程序中唯一地标识它们。

   //添加菜单和菜单按钮
myGalleria.addElement("菜单").appendChild("容器", "菜单");
myGalleria.addElement("menuButtons").appendChild("menu", "menuButtons");

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

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

第三轮

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

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