Question

我正在编写一些可以获取xml文件数组的jquery。然后它将循环遍历这些并解析它们以在页面上显示它们。我有这个工作但我想做的一件事，如果它列出了内容之前，我希望它打印文件的名称。这是我的代码。

$.get('inc/getMenuFiles.php', function(data) {
    var catSplit = data.split(",");
    var menuitems = $('.menuitems');
    menuitems.empty();

    for (i=2; i<catSplit.length; i++) {

        url = "inc/menulists/" +catSplit[i].replace(/"/g, '').replace(/]/g, '');
        catName = catSplit[i].replace(/"/g, '').replace(/.xml/g, '').replace(/]/g, '');

        menuitems.append(catName);

        $.ajax({
            type: "GET",
            url: url,
            dataType: "xml",
            success: function(xml) {
                $(xml).find('item').each(function(){
                    var name =  $(this).find('name').text();
                    var price = $(this).find('price').text();
                    menuitems.append(name + " - $" +price + "<br />");
                });
            }
        });
    }
});

这是无效的但是如果我这样做就可以了

$.ajax({
                type: "GET",
                url: url,
                async: true,
                dataType: "xml",
                success: function(xml) {
                    $(xml).find('item').each(function(){
                        var name = $(this).find('name').text();
                        var price = $(this).find('price').text();
                        menuitems.append(name + " - $" +price + "<br />");
                    });
                }
            }).delay();

所以我想我只需要在ajax调用之后正确添加延迟

Answer 1

这种情况正在发生，因为在当前执行路径完成之前，您的Ajax回调将不会执行。为了解决这个问题，你可以等到你的ajax回调内部追加catName。这应该有效：

$.get('inc/getMenuFiles.php', function(data) {
    var catSplit = data.split(",");
    var menuitems = $('.menuitems');
    menuitems.empty();

    for (i=2; i<catSplit.length; i++) {

        url = "inc/menulists/" +catSplit[i].replace(/"/g, '').replace(/]/g, '');
        catName = catSplit[i].replace(/"/g, '').replace(/.xml/g, '').replace(/]/g, '');

        $.ajax({
            type: "GET",
            url: url,
            dataType: "xml",
            success: (function(catName){
                return function(xml) {
                    menuitems.append(catName);

                    $(xml).find('item').each(function(){
                        var name =  $(this).find('name').text();
                        var price = $(this).find('price').text();
                        menuitems.append(name + " - $" +price + "<br />");
                    });
                }
            })(catName)
        });
    }
});

您仍然（就像在原始代码中一样）无法保证您的请求可以完成的顺序，因此有时候appetizers.xml和beer.xml会按相反的顺序加载。

Answer 2

这种情况正在发生，因为你的for循环比AJAX调用更快。请记住， AJAX 中的第一个 A 代表异步。想象一下......

你处于for循环的开头。您可以选择第一个catName，然后将其附加到menuitems。然后启动AJAX调用以获取name中每个price的{{1}}和item。同时，AJAX请求尚未响应，因此我们将一个移动到第二个catName，然后启动另一个AJAX请求。第一个没有完成，我们刚刚发出第二个请求;所以现在我们有2个待处理的AJAX响应。与此同时，我们继续进行第三次catName。

等等，等等......

<强>解决方案

将内部AJAX调用中的async属性设置为catName。这将使for循环暂停直到请求完成。
** 首选** 在for循环之前进行AJAX调用，将响应存储在某个地方（可能在数组中），而不是使用此数组运行for循环。

jQuery - 作为一个单词打印的变量字符串

2 个答案: