Question

我正在尝试将几个文件夹中的所有图像加载到一个数组中并将它们添加到我的页面

我正在使用以下代码

function initialize()
{   
    //all images are stores in images/name_of_dir
    var folder = "images/";
    //we want to load images from several dirs. If in the future we want other dirs or more dirs 
    //we can update this array to point to the new dirs
    var possible_dirs = [ "cute", "disgusted", "neutral"];
    var image_array = [];
    for ( index = 0 ; index < possible_dirs.length; ++index) {
        image_array.push(getImagesFromFolder(folder +  possible_dirs[index] + "/"));
    }
//This loop will append images later. Need to fix this
//    for ( j = 0 ; j < image_array.length; ++j) {
//        $("body").append("<img src='" + image_array[j][0] + "'>");
//    }

}


function getImagesFromFolder(folder){
            var images_array = [];
            $.ajax({
            url : folder,
            success: function (data) {
                $(data).find("a").attr("href", function (i, val) {
                    if( val.match(/\.(jpe?g|png|gif)$/) ) { 
                        images_array.push(folder + val);
                    } 
                return images_array;
                });
            }
        })
}

代码可能在ajax调用实际返回之前访问image_array的问题。我考虑在ajax调用中添加一个done，但它没有用。

f1如何调用f2（f2中有ajax）并且仅当f2真正完成时才会继续？

编辑：

仍然不确定我做错了什么

// Loads the images into arrays and starts introduction
function initialize()
{   
    //all images are stores in images/name_of_dir
    var folder = "images/";
    //we want to load images from several dirs. If in the future we want other dirs or more dirs 
    //we can update this array to point to the new dirs
    var possible_dirs = [ "cute", "disgusted", "neutral"];
    var images_array = [];
    $.when.apply($, possible_dirs.map(function(file) {
        return getImagesFromFolder(folder +  file + "/")
    }))
    .then(function(data) {
        // do stuff with `data`
        $(data).find("a").attr("href", function (i, val) {
            if( val.match(/\.(jpe?g|png|gif)$/) ) { 
                images_array.push(folder + val);
            } 
        });
        console.log(images_array);
    }, function(jqxhr, textStatus, errorThrown) {
    // handle errors
    })
}

function getImagesFromFolder(folder) {
  // note `return` 
  return $.ajax({url : folder});
}

数据是：

(3) ["<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final/…235.jpg">1235.jpg</a>↵</ul>↵<hr>↵</body>↵</html>↵", "success", {…}]
0
:
"<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"><html>↵<title>Directory listing for /images/cute/</title>↵<body>↵<h2>Directory listing for /images/cute/</h2>↵<hr>↵<ul>↵<li><a href=".DS_Store">.DS_Store</a>↵<li><a href="1223.jpg">1223.jpg</a>↵<li><a href="1235.jpg">1235.jpg</a>↵</ul>↵<hr>↵</body>↵</html>↵"
1
:
"success"
2
:
{readyState: 4, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …}
length
:
3
__proto__
:
Array(0)

Answer 1

您可以使用$.when()

function getImagesFromFolder(folder) {
  // note `return` 
  return $.ajax(folder)
}

$.when.apply($, possible_dirs.map(function(file) {
  return getImagesFromFolder(folder +  file + "/")
}))
.then(function() {
  // do stuff with `data`
  var docs = $.makeArray(arguments).map(function(arr) { return arr.shift() });
  $.each(docs, function(key, doc) {
    console.log(doc); // parse HTML string
  });
}), function(jqxhr, textStatus, errorThrown) {
  // handle errors
})

另见How to print all the txt files inside a folder using java script

只有在完成后才返回ajax调用的数据

1 个答案: