Javascript 仅当ajax调用完成时才返回数据_Javascript_Ajax

Javascript 仅当ajax调用完成时才返回数据

javascript ajax

Javascript 仅当ajax调用完成时才返回数据,javascript,ajax,Javascript,Ajax,我正在尝试将多个文件夹中的所有图像加载到一个数组中，并将它们添加到我的页面中我正在使用以下代码 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

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

我正在使用以下代码

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

数据如下：

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

（3）[“1235.jpg↵↵↵↵↵", "成功“，{…}]
0
:
"↵/images/cute的目录列表/↵↵/images/cute的目录列表/↵
↵↵<李>↵<李>↵<李>↵
↵↵↵↵"
1.
:
“成功”
2.
:
{readyState:4，getResponseHeader:ƒ，GetAllResponseHeader:ƒ，setRequestHeader:ƒ，OverrideMetype:ƒ，…}
长度
:
3.
__原型__
:
数组（0）

您可以使用

$.when（）

另请参见

如果您可以使用新的ES标准，我建议您研究async Wait。对于这种情况，整个代码现在是否必须位于then部分？因为否则它将无法工作？添加了一个编辑。数组仍然为空。什么数组？

数据

应该包含请求的结果，但我正在执行$（数据）。find（“a”）.attr（“href“，函数（i，val）{什么是

数据

？在传递给

的第二个函数中，控制台.log（textStatus，errorshown）
的作用是什么。然后（）

日志，如果有的话？包含其中一个文件夹，但不是全部3个，并且没有任何错误。”

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

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