javascript - 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，这两者都会在上次调用< cc>完成。

但是您确实有幸存的函数关闭功能，这可能会造成混乱或引起问题。一种猜测是，您可能希望确保您希望它们是局部变量（例如createGallery前面带有myGalleria，因此它们实际上是局部变量，而不是可能作用域更高的变量，例如受此呼叫的先前化身影响，或影响尚未完成的较早呼叫。

var myGalleria = Galleria.get(0);

然后，假设 var是某种数据结构，例如数组或对象，则必须确保该数据结构只有一个全局版本永不改变，或者每次 imgData调用都具有适当的单独副本该数据结构。如果在进行更改时，随后对 createGallery的调用可能无法获取所需的数据。如果它是只读数据结构（您不更改它），那么您可能会满意。

好的，让我们讨论一下伪代码的作用。


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


摘要

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

如果这些方法都不能完全解决问题，那么我们可能需要有关 myGalleria所做的更多信息。

仅供参考，调整大小clickHandler似乎与不使用var来使变量声明成为局部变量时存在相同的问题。

第二回合

好的，这里有更多观察结果。


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

Galleria.get(0)
当您设置一个单击处理程序以大概仅处理这些菜单项的单击时，您每次都使用完全相同的CSS选择器，因此，无法将这个单击处理程序唯一地分配给新创建的菜单项（这是我假设您要的）。我不知道Galleria代码，但是我假设您应该创建某种唯一ID，将其传递给新创建的菜单项的addElement和appendChild，然后在安装单击处理程序时引用该唯一标识符。同样，此功能仅需要唯一地定位使用唯一标识符 // Adding menu and menu buttons
myGalleria.addElement("menu").appendChild("container", "menu");
myGalleria.addElement("menuButtons").appendChild("menu", "menuButtons");创建的菜单按钮
最后，我建议您更改一个变量的名称，以避免混淆。在您的点击处理程序中，将出现的三个 myGalleria.$("menuButtons").html(data);更改为 imgData，这样就不会造成闭包和imgData值的混淆。


第三回合

最终，修复程序之一是（嵌入在注释中）：

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