Javascript 函数完成后在for循环中继续

我发现JavaScript中的行为会给我带来麻烦。我有两个职能：

var show\u uploaded=函数（data\u photo）

用于获取上传照片的信息作为参数

函数exif_-like（path）{/*处理我的图像*/console.log（'exif_-like END'）；}

作为参数获取每个上传照片的路径

我编写了如下代码：

var show_uploaded = function( data_photo ){
    for( var z = 0; z < data_photo.length; z++ ){ 
       var send_image_name = uploaded_photo[z].name;
       $.ajax({
            data: { compare : send_image_name },
            url: 'get_panorama.php',
            method: 'POST', // or GET
            success: function( path ){
                exif_like( path );
                console.log('FOR LOOP END');
            }
       });
    }
};

var show\u upload=函数（数据\u照片）{
对于（var z=0；z

但我在控制台中看到的是，“FOR LOOP END”日志显示在“exif_like END”日志之前。这在我的代码中会导致一些不可预测的行为

---

在exif_-like（）函数完成后，有什么解决方案可以继续for循环吗？

如果剩余的进程返回预期的结果，并且

exif_-like

实际上只执行

console.log（）

您可以尝试使用

$.when（）

---

替换

for loop

to loop，条件是直到数据不为空，然后开始

，而
loop create
flag
变量将是ajax成功处理程序完成并可发送下一个ajax的布尔标识符。请参阅下面带有注释更改的代码：

var show_uploaded = function( data_photo ){
  // Create flag 
  var flag = true;
  var length = data_photo;

  // continue loop execution until data_photo not empty
  while (length){
    if(flag){
        var send_image_name = uploaded_photo[--length].name;
        // Set flag to false, until success executed
        flag = false;
        $.ajax({
            data: { compare : send_image_name },
            url: 'get_panorama.php',
            method: 'POST', // or GET
            success: function( path ){
                exif_like( path );
                console.log('FOR LOOP END');
                // We are ready to perform next ajax, set flag to true.
                flag = true;
            },
            error: function( path ){
                // Error or not we have to set flag to true to allow further iterating
                flag = true;
            }
       });
   }
}
};

如果您试图让
exif\u like（）
在Ajax调用之间执行操作，只需在下一个Ajax请求完成时让您的
exif\u like（）
函数调用它即可

使用来自的测试数据，类似这样的方法可以工作：

JavaScript

uploaded_photo = [{name: 1},{name: 2},{name: 6},{name: 8},{name: 9},{name: 11},{name: -1}]
pointer = 0;

function exif_like(path){
    /*working with my image*/ 
  obj = JSON.parse(path)
  if(obj.length > 0) {
    console.log('\t\tdata returned:'+obj[0].id + ' '+obj[0].title)
        console.log('exif_like END for '+obj[0].id);
  } else {
    console.log('\t\tNo data returned')
        console.log('exif_like END');  
  }

  /* Code here can be executed before the next Ajax call */
  console.log('Do stuff before the next ajax call...')

  pointer++;
  if(pointer < uploaded_photo.length) {
    show_uploaded();
  }
}

var show_uploaded = function(){
    console.log('---Start of Ajax call---');

  $.ajax({
    data: { id : uploaded_photo[pointer].name },
    url: 'https://jsonplaceholder.typicode.com/posts',
    method: 'GET', 
    complete: function( xhr ){
        console.log('---End of Ajax call---');
      exif_like( xhr.responseText );
    }
  });
};

show_uploaded()

upload_photo=[{name:1}，{name:2}，{name:6}，{name:8}，{name:9}，{name:11}，{name:-1}]
指针=0；
函数exif_-like（路径）{
/*使用我的图像*/
obj=JSON.parse（路径）
如果（对象长度>0）{
console.log（'\t\t返回的数据：'+obj[0].id+'+obj[0].title）
console.log（'+obj[0].id的类似exif_的结尾）；
}否则{
console.log（'\t\t未返回数据'）
log（'exif_like END'）；
}
/*这里的代码可以在下一个Ajax调用之前执行*/
log（'在下一个ajax调用之前执行任务…'）
指针++；
if（指针<上传照片长度）{
show_上传（）；
}
}
var show_upload=函数（）{
log（'---Ajax调用的开始---'）；
$.ajax({
数据：{id:upload_photo[pointer].name}，
网址：'https://jsonplaceholder.typicode.com/posts',
方法：“GET”，
完成：函数（xhr）{
log（'--Ajax调用结束---'）；
类exif_（xhr.responseText）；
}
});
};
show_上传（）

输出

uploaded_photo = [{name: 1},{name: 2},{name: 6},{name: 8},{name: 9},{name: 11},{name: -1}]
pointer = 0;

function exif_like(path){
    /*working with my image*/ 
  obj = JSON.parse(path)
  if(obj.length > 0) {
    console.log('\t\tdata returned:'+obj[0].id + ' '+obj[0].title)
        console.log('exif_like END for '+obj[0].id);
  } else {
    console.log('\t\tNo data returned')
        console.log('exif_like END');  
  }

  /* Code here can be executed before the next Ajax call */
  console.log('Do stuff before the next ajax call...')

  pointer++;
  if(pointer < uploaded_photo.length) {
    show_uploaded();
  }
}

var show_uploaded = function(){
    console.log('---Start of Ajax call---');

  $.ajax({
    data: { id : uploaded_photo[pointer].name },
    url: 'https://jsonplaceholder.typicode.com/posts',
    method: 'GET', 
    complete: function( xhr ){
        console.log('---End of Ajax call---');
      exif_like( xhr.responseText );
    }
  });
};

show_uploaded()

---开始Ajax调用--

---Ajax调用结束--

返回的数据：1个sunt aut facere repellat provident occaecati，不包括选择权REPREREHENDERIT

1的exif_类结束

在下一个ajax调用之前做一些事情…

---开始Ajax调用--

---Ajax调用结束--

返回的数据：2 qui est esse

2类exif_端

在下一个ajax调用之前做一些事情…

---开始Ajax调用--

---Ajax调用结束--

返回的数据：6个dolorem eum magni eos aperiam quia

6类exif_端

在下一个ajax调用之前做一些事情…

---开始Ajax调用--

---Ajax调用结束--

返回的数据：8 dolorem dolore est ipsam

8的exif_类结束

在下一个ajax调用之前做一些事情…

---开始Ajax调用--

---Ajax调用结束--

返回的数据：9个月的时间和累计值

9的exif_类结束

在下一个ajax调用之前做一些事情…

---开始Ajax调用--

---Ajax调用结束--

返回的数据：11个月
11的exif_类结束

在下一个ajax调用之前做一些事情…

---开始Ajax调用--

---Ajax调用结束--

没有返回数据

类exif_端

JS小提琴示例：

希望有帮助

*编辑：更新代码以使用
complete
函数，以防请求不成功。
那么，您将获得多个“for循环结束”日志，因为它位于
for
循环内。你确定你没有在不同的“exif end”之前看到它们中的一个吗？它们仍然应该成对出现？我们可以看到更多类似于exif的
exif\u的内容吗？您是否在其中使用异步方法？例如，当我上传3张照片时，konsole打印：“For LOOP END”、“For LOOP END”、“For LOOP END”、“exif_like END”、“exif_like END”、“exif_like END”。。它们仍然应该成对出现，比如：“类似exif_的END”，“FOR LOOP END”，“类似exif_的END”，“FOR LOOP END”，“类似exif_的END”，“FOR LOOP END”，在您发布的代码中，您应该看到您所期望的
exif_like
也必须与该函数中的日志异步执行某些操作，而不是根据您的问题直接在函数中执行。@JamesThorpe是的，它异步执行某些操作，但它位于exif_like（）中，我不认为这是从该函数返回并在exif_like（）的最后一行之前继续循环的原因被执行。我遗漏了什么吗？如果在提到console.log（）之后，我的函数最终返回true，是否可以这样做：$.when（exif_like（path）==true）。然后（function（）{console.log（“FOR LOOP end”）}？@PetrBečka是的，应该可以这样做。然而，这是你在OP和评论中描述的问题吗？还要注意的是，问题中的
exif_like（path）
at
js
似乎没有返回任何值？谢谢，我会尝试的。对