Question

我觉得我不完全理解ajax调用是如何工作的（我保证我试图理解但是虽然我认为我做了，但我的代码并没有像预期的那样工作）。这就是我想要做的事情：我有服务器端代码，它只返回一个图像网址数组。对于每个图像，我使用客户端侧面检测库进行面部检测。在对所有图像进行面部检测后，我需要在画布上逐个绘制它们（这不再是真正相关的）。在现实中发生的事情是，我首先得到的警告是＆＃34;完成寻找面孔＆＃34;然后我才用图像的网址获取警报，并为所有图像使用相同的网址。我还设置了＆＃34; async＆＃34;为假，因为我认为这将使事件的顺序像我期望的那样工作。如果我不清楚并且提前非常感谢你，请告诉我！

//Call FB api from server side script
function callApi(userId, token) {
      $.ajax({
          "type": "GET",
          "url": API_ROUTE + "?userid=" + userId + "&token=" + token,
          "async": false,  //setting to false because we don't want to start drawing before face detection is done
          success: function(data, status, xhr) {
              face_coords = []; //Array that stores face locations for each image (indexs are respective to 
                                    //image indexes in aImages)
             for (var i = 0; i < data.length; i++) {
                  var img_url = data[i];
                  img_url.replace('https://', 'http://'); //To avoid cross-domain issues

                  // collect all images
                  var oImg = new Image();
                  oImg.crossOrigin = 'Anonymous';
                  oImg.src = img_url;
                  aImages.push(oImg);
                  $("#myPicture").attr("src", oImg.src).load(function() {
                      var coords = $('#myPicture').faceDetection();
                      //find the face detected with the highest confidence
                      if (coords.length > 0) {
                          var highest_confidence = 0,
                              highest_c = 0;
                          for (var c = 0; c < coords.length; c++) {
                              if (coords[c].confidence > highest_confidence) {
                                  highest_confidence = coords[c].confidence;
                                  highest_c = c;
                              }
                          }
                      }
                      face_coords.push(coords[highest_c]);
                      alert ("done with " + $('#myPicture').get(0).src)
                  });
              }
          }
      });
      alert("done with looking for faces");
      var canvas = $('#myCanvas').get(0);
      context = canvas.getContext('2d');
      //draw first image
      context.drawImage(aImages[0], 0, 0, CANVAS_WIDTH, aImages[0].height / aImages[0].width * CANVAS_WIDTH);
      changeSlide(); //call on the first image in order to not waste 5 seconds
      timer = setInterval(changeSlide, 5000); // set inner timer
  }

Answer 1

你可以尝试.done（）而不是成功。

function getData() {
return $.ajax({
    url : 'example.com',
    type: 'GET'
});
}

function handleData(data /* , textStatus, jqXHR */ ) {
    alert(data);
    //do some stuff
}

getData().done(handleData);

Answer 2

我认为你的问题是当你为所有循环获得具有相同ID的图像元素时！您必须为图像元素添加特定值。现在看来您尝试使用id myPicture 始终影响相同的元素。 $("#myPicture").attr("src", oImg.src); 尝试为元素$("#myPicture_" + something )添加后缀。

另外，你应该把这段代码放在

中

 face_coords.push(coords[highest_c]);
                  alert ("done with " + $('#myPicture').get(0).src)

在图像加载功能中，因为berore加载完成后会收到警报！

ajax调用中的循环 - 我对事件的顺序感到困惑

2 个答案: