Javascript Wait gif不会在调用JQuery之前显示

我正在尝试在加载数据表时显示等待gif。我只是在输入我的

$（元素）之前调用
$（元素）.show（）
。每个（）

循环使用数据表显示所有子网格（即

displaynerTable（）

）

似乎我已经把问题缩小到

.each（）

方法。如果我删除

.each（）

中的所有代码，等待gif仍然不会显示，是的，我还删除了

.hide（）

。如果我在

.each（）

前面加了一个断点，等待gif就会显示出来。似乎是一个时间问题，如

。each（）

发生得太快，

div

中的

wait.gif

没有时间渲染。既然如此，为什么Javascript线程会阻止html元素操纵呢

我确实找到了一些类似的文章，但没有一篇能回答这个具体问题。大多数其他文章建议使用

setTimeout（）

。我试了各种可能的方法，没有运气。任何帮助、提示或线索都将不胜感激

以下是我的代码片段：

  $(document).ready(function () 
  {
    $('#expand-all').on('click', function () {
        $("#loader-wait-ani").show();
        ExpandAllChildGrids();
    });

    function ExpandAllChildGrids()
    {
       var tr;
       $('#result-table tbody tr').each(function (value, index) {
          tr = $(this).closest('tr');
          var row = outerTable.row(tr);
          userId = row.cell(tr, 1).data();

        DisplayInnerTable(userId, row, tr);
      });
      $('#expand-all-img').attr('src', '/Images/minus.gif');
      $("#loader-wait-ani").hide();
   }
 });

这是我的html：

    <div style="width:100%; margin: 0 auto; text-align:center;">
        <div id="loader-wait-ani" class="modal" style="display: none; z-index: 300;">
            <img src="~/Images/waitbar.gif" alt="Pleae Wait..." width="250" height="20" />
        </div>
    </div>

---

试试这个。它是对

show（）

的回调，也是对

displaynerTable（）的回调

在每个循环中使用
async:false
，您将阻止浏览器，直到所有请求的响应都已发送。在代码到达单击回调的末尾之前，浏览器不会进行任何渲染

因此，您需要异步请求数据，并且在加载所有数据后，必须隐藏加载gif。我假设您使用jQuery的ajax方法，因此可以使用返回的Defere跟踪您的请求

诸如此类的事情：

function DisplayInnerTable(userId, row, tr, callback) {
  //return the Defered object of the jQuery request
  return $.ajax('/request/to/url');
}


$(document).ready(function() {
  $('#expand-all').on('click', function() {
    $("#loader-wait-ani").show();
    ExpandAllChildGrids();
  });


  function ExpandAllChildGrids() {
    var tr;
    var allRequests = [];
    $('#result-table tbody tr').each(function(value, index) {
      tr = $(this).closest('tr');
      var row = outerTable.row(tr);
      userId = row.cell(tr, 1).data();

      //collect all Deferes in an array
      allRequests.push(DisplayInnerTable(userId, row, tr));
    });


    $.when.apply($, allRequests)
      .then(function() {
        // will be executed when all requests are finished
        $('#expand-all-img').attr('src', '/Images/minus.gif');
        $("#loader-wait-ani").hide();
      })
  }
});

以下是一些相关信息：



$.when.apply（$，所有请求）
：
是否有多个id=“loader wait ani”？是否尝试在
.show（）
上使用回调函数？是否在同一代码执行例程中显示和隐藏加载gif。在这两者之间不会发生渲染。这就是它不会出现的原因。
DisplayInnerTable
函数在内部做什么？在填充单元格的
DisplayInnerTable
中是否有一些异步代码？@RlanGillis-否，我没有多个id=“loader wait ani”divs@lamelemon-我没有想过在.show（）上使用回调-我将研究如何实现它。这将在第一个请求完成后立即隐藏加载程序gif。所以这不是最好的解决方案，如果一个请求比其他请求花费更多的时间。@t.niese是的，我用错了函数。如果请求不是异步的，这可能会起作用，但您应该假设浏览器窗口完全冻结，停止所有事情，包括gif动画。无论如何，如果请求时间需要加载指示器，那么同步请求是一个非常糟糕的主意。除此之外，
async:false
由于jQuery 1.8而被弃用，因此不应使用。@t.niese与我的实际答案无关，如果他使用的是ajax，那么这不是一个使用
.ajaxStart（）
和
.ajaxStop（）的好地方吗
handlers？@lamelemon-您上面的解决方案立即解决了我等待gif不显示的问题，现在显示出来了。然而，动画是暂停的，正如（t.niese）上面提到的，浏览器冻结了所有东西。对于选择使用Datatables库，我有一种不好的感觉。如果你知道我可能会错过什么，这将使动画不会冻结将是非常有帮助的。。谢谢你们两位的及时和彻底的回复！！您的解决方案看起来确实是正确的选择，但不幸的是，如果使用async:true，则按照我设计的方式使用数据表，网格将不会呈现，否则您的解决方案将起作用。我设置了async:true，并确保显示了wait gif，但正如预期的那样，网格将不会渲染。
function DisplayInnerTable(userId, row, tr, callback) {
  //return the Defered object of the jQuery request
  return $.ajax('/request/to/url');
}


$(document).ready(function() {
  $('#expand-all').on('click', function() {
    $("#loader-wait-ani").show();
    ExpandAllChildGrids();
  });


  function ExpandAllChildGrids() {
    var tr;
    var allRequests = [];
    $('#result-table tbody tr').each(function(value, index) {
      tr = $(this).closest('tr');
      var row = outerTable.row(tr);
      userId = row.cell(tr, 1).data();

      //collect all Deferes in an array
      allRequests.push(DisplayInnerTable(userId, row, tr));
    });


    $.when.apply($, allRequests)
      .then(function() {
        // will be executed when all requests are finished
        $('#expand-all-img').attr('src', '/Images/minus.gif');
        $("#loader-wait-ani").hide();
      })
  }
});