javascript - 图像加载后进行 AJAX 调用，一次一张

Question

尽管有很多类似的问题，但我还没有找到解决这个特定问题的方法。我有许多文件夹，每个文件夹都包含许多图像文件。我想对这些文件进行批量人脸检测，并将人脸坐标和其他相关数据发送到数据库，我打算使用这个 jQuery 插件:http://facedetection.jaysalvat.com/ 。它一次处理一张图像，并通过以下基本调用返回所有必要的数据:

var coords = $('img').faceDetection({
    complete:function(img,coords) {
      // Do stuff ...
    }
});

我想做的是从所有图像的列表开始，一次向该函数发送一个，对 PHP 文件进行 AJAX 调用，将相关数据放入数据库中，然后在 AJAX 业务之后完成后将下一张图像发送到人脸检测插件...直到所有图像都已处理完毕。

到目前为止，我想到的最好的方法如下:

var tot = imgs.length;
facedetect(0);
function facedetect(imgn) {
    $('img').attr('src',imgs[imgn].path);
    $('img[src="' + imgs[imgn].path + '"]').load(function() {
        var coords = $('img').faceDetection({
            complete:function(img,coords) {
                // Create var json ...
                $.ajax({
                    type: "POST",
                    url: "test.php",
                    data: { data : json },
                    success: function() {
                        imgn++;
                        if(tot > imgn) {
                            facedetect(imgn);
                            return;
                        }
                    }, dataType: "json"
                });
            }
        });
    });
}

但是，如果我使用三个图像的简单列表 (imgs[0]-imgs[2]) 运行此命令，我会收到第一个图像的一个 AJAX 调用，第二个图像的两个 AJAX 调用，第三个图像的四个调用，而不是第一个图像的 AJAX 调用。每个。显然有些事情是非常错误的，但我不知道是什么，所以任何帮助将不胜感激。

编辑:我首先尝试了 for 循环和 $().each() ，但由于它们不等待每个图像加载，所以我尝试使用递归。因为这就是我想要做的——一次加载一张图像。 imgs.length 基于 PHP 数组，文档中只有一个 img 标签。然而，您的回复让我意识到实际上我可以确保在开始循环之前加载所有图像。我什至没有考虑到这一点，可能是因为我有几千张图像，但当然，我可以一次处理几个文件夹。所以谢谢，这就是我接下来要尝试的。 :) (但仅仅为了这个目的，找到一种适用于一次加载一张图像的可行解决方案也是很有趣的。)

Answer 1

不要递归地发送 ajax 查询，而是尝试在 for 循环中发送它们:

编辑: 如果您这样做，您可能需要进行查询async = false，以便图像 src 不会更改，并且在本查询完成之前不会触发下一个查询。

var tot = imgs.length;
for(var imgn=0; imgn<tot; imgn++)
{
  $('img').attr('src',imgs[imgn].path);
  $('img[src="' + imgs[imgn].path + '"]').load(function() {

     var coords = $('img').faceDetection({

        complete:function(img,coords) {

           $.ajax({
               dataType: "json",
               type: "POST",
               url: "test.php",
               data: { data : json },
               async: false,
               success: function(data) {console.log(data);},
               error: function(e){console.log(e.responseText);}
            });
        }
    });
}