javascript - jQuery 在函数执行时更改图像以显示进度

Question

我知道在某些浏览器(IE、Chrome)中，直到函数完成后才会发生对 DOM 的更改。我已经阅读了有关如何处理此问题的各种建议，但我没有任何运气。我试图循环执行一系列 AJAX 调用并显示正在处理的每一行的进度。代码是这样的:

for(i=0; i < rowIds.length; i++){ 

  $(rowImage).attr('src', '/images/spinner.gif');

       $.ajax({
                    type: 'GET',
                    url: ajaxUrl,
                    async: false,
                    processData: true,
                    data: {},
                    dataType: "json",
                    success: function(data) {
                        $(rowImage).attr('src', '/images/success.gif');
                   }
              });
}

我读过一些关于尝试确保在继续之前进行图像转换的建议，例如在 AJAX 调用开始之前执行此操作:

var changeImage = function() {
    $(rowImage).attr('src', '/images/spinner.gif');
};

$.when(changeImage() ).done( function() {
           //run AJAX call

但这并没有什么区别。在函数执行完成之前，图像不会发生变化。

您会注意到我将 async 设置为 false，并且出于各种原因这样做。但即使没有到位，问题仍然存在。我也尝试过按照建议使用 setTimeOut() ，但这似乎不起作用(而且我知道 setTimeOut() 适用于异步模式，但即使在异步模式下，它似乎也没有帮助。)

Answer 1

Jquery:

$.ajax({
      type: 'GET',
      url: ajaxUrl,
      async: false,
      processData: true,
      data: {},
      dataType: "json",
      success: function(data) {
             $(rowImage).attr('src', '/images/success.gif');
      }
 });

 $(document).ajaxStart(function () {
        $(rowImage).attr('src', '/images/spinner.gif');
    }).ajaxStop(function () {

 });