为什么 Ajax 调用之前的文本不显示？

Question

function pdfToImgExec(file, IsfirstLogging, folder, round) {
  alert(file);
  var postString = file + '&' + IsfirstLogging + '&' + folder + '&' + round;
  var errorMsg = (folder == 'Incoming' ? '<p>error in incoming folder</p>' : '<p>error in other folder</p>');
  $.ajax({
    type: "POST",
    cache: false,
    async: false,
    url: "pdfToImgExec.php",
    data: {
      "data": postString
    },
    dataType: "html",
    beforeSend: function () {
      alert(file + 'a');
      $('#pdfToImgResult').html('<p>Converting' + file + ', Please wait......</p>');
    },
    success: function (data) {
      if(data == '1') {
        $('#pdfToImgResult').html('<p>Complete convert ' + file + '</p>');
      } else if(round < 4) {
        $('#pdfToImgResult').html('<p>Fail to convert ， retry ' + round + ' round <img src="loading.gif" height="20" width="20"/></p>');
        round++;
        pdfToImgExec(file, 'false', folder, round);
      } else {
        folder == 'Incoming' ? tempFailIncomingFiles.push(file) : tempFailResultFiles.push(file);
      }
    },
    error: function (x, t, m) {
      $('#pdfToImgResult').html(errorMsg);
      alert(t);
      releaseBtn();
    }
  });
}

这个 ajax 调用的问题是我可以在 beforeSend 函数中提醒 (file + 'a') ，但是

$('#pdfToImgResult').html('<p>Converting' + file + ', Please wait......</p>');

不工作，它不会显示任何东西，只会跳转到

$('#pdfToImgResult').html('<p>Complete convert ' + file + '</p>');

ajax 调用完成后。

是因为async:false吗？如何解决问题？谢谢。

Answer 1

因为你使用的是async: false,，所以函数会阻塞直到请求完成，防止重绘直到一切都完成。

您似乎都设置了回调，因此似乎没有任何理由发出阻塞 xhr 请求。只需删除async: false,，就可以了。

---

这里有一个如何处理异步代码的简单示例。为了简短起见，我删除了大部分代码。

 // --------------------------------new parameter-------------v
function pdfToImgExec(file, IsfirstLogging, folder, round, callback) {
  // your code...
  $.ajax({
    type: "POST",
    cache: false,
//  async: false,  // Remove this line! 
    url: "pdfToImgExec.php",
    data: {
      "data": postString
    },
    dataType: "html",
    beforeSend: function () {
      $('#pdfToImgResult').html('<p>Converting' + file + ', Please wait......</p>');
    },
    success: function (data) {
      // your code...

      // Invoke the callback, passing it the data if needed
      callback(data)
    },
    error: function (x, t, m) {
      // your code;
    }
  });
}

当您调用pdftoImgExec 时，传递一个函数作为响应完成时将调用的最后一个参数。该函数是您的代码恢复的地方。

pdfToImgExec(..., ..., ..., ..., function(data) {
    // resume your code here.
    alert(data);
})