Question

我发现行为让我在JavaScript中遇到麻烦。我有两个功能：

var show_uploaded = function( data_photo )将上传的照片信息作为参数

function exif_like(path){/*working with my image*/ 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');
            }
       });
    }
};

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

在exif_like（）函数完成后，有没有解决方法如何继续循环？

Answer 1

如果剩余的流程返回预期结果，exif_like实际上只执行console.log()，您可以尝试使用$.when()

$.when(exif_like( path )).then(function() {console.log("FOR LOOP END")})

Answer 2

将for loop替换为while循环，条件是直到data_photo不为空，之前启动while循环创建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;
            }
       });
   }
}
};

Answer 3

如果您尝试在Ajax调用之间执行exif_like()，只需让exif_like()函数在完成后调用下一个Ajax请求。

使用来自json placeholder的测试数据，这样的事情可行：

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

<强>输出

---开始Ajax调用---
  ---结束Ajax通话---
          返回的数据：1 sunt aut facere repelat provident occaecati excepturi optio reprehenderit
  exif_like END为1
  在下一个ajax调用之前做一些事情...
  ---开始Ajax调用---
  ---结束Ajax通话---
          返回的数据：2 qui est esse
  exif_like END为2
  在下一个ajax调用之前做一些事情...
  ---开始Ajax调用---
  ---结束Ajax通话---
          返回的数据：6 dolorem eum magni eos aperiam quia
  exif_like END为6
  在下一个ajax调用之前做一些事情...
  ---开始Ajax调用---
  ---结束Ajax通话---
          返回的数据：8 dolorem dolore est ipsam
  exif_like END为8
  在下一个ajax调用之前做一些事情...
  ---开始Ajax调用---
  ---结束Ajax通话---
          返回的数据：9 nesciunt iure omnis dolorem tempora et accusantium
  exif_like END为9
  在下一个ajax调用之前做一些事情...
  ---开始Ajax调用---
  ---结束Ajax通话---
          返回的数据：11 et ea vero quia laudantium autem
  exif_like END为11
  在下一个ajax调用之前做一些事情...
  ---开始Ajax调用---
  ---结束Ajax通话---
          没有数据返回
  exif_like END

JS小提琴示例：https://jsfiddle.net/igor_9000/wwj11udx/3/

希望有所帮助！

*编辑：更新代码以改为使用complete功能，以防有些请求无法成功。

函数完成后继续for循环JavaScript

3 个答案: