jQuery recursion

jQuery recursion

本文关键字：recursion jQuery      更新时间：2023-09-26

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

文档就绪(只是为了显示我第一次调用函数时，第一次一切正常(

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

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

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();
});

仅供参考 - 这实际上不是传统意义上的递归，因为您是从单击处理程序调用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 使您的变量声明成为局部变量存在相同的问题。

第 2 轮

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

  1. 使用此代码块添加菜单和菜单按钮时，不会向 addElement 或 appendChild 函数提供任何唯一标识符(您为两者提供"菜单"和"菜单按钮"(。 因此，我不知道如何在随后的点击事件中唯一地连接到它们。 就代码外观而言，所有菜单项看起来都相同，没有一个具有唯一状态。 我不知道 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的三次匹配更改为仅data这样就不会混淆闭包和 imgData 的值。

第 3 轮

最终修复之一是这个(嵌入在评论中(：

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

相关文章：