元素未显示在显示和立即异步 ajax 调用中答案

【问题标题】：Element Not Showing on show and immediate async ajax call元素未显示在显示和立即异步 ajax 调用中
【发布时间】：2018-02-16 16:17:09
【问题描述】：

我试图显示加载 gif 并调用 ajax 请求（在很长一段时间后响应），然后我隐藏加载 gif。

下面是代码：

$('.loading-gif').show();
$ajax({url:'',async:false}).done(function(){...//some operation});
$('.loading-gif').hide();

我想知道为什么会这样。注意：当我使用调试进行检查时，它可以工作，但是当调用 ajax 请求时，gif 图像会停止动画。还有什么是我解决这个问题的解决方案。

【问题讨论】：

【解决方案1】：

JS 是单线程的，当您使用异步标志发出 ajax 请求时，它会暂停线程导致动画停止

同时进行同步 http 调用也不是一个好习惯。

这应该可以解决您的问题。

$('.loading-gif').show();
$ajax({url:''})
  .done(function(){
    ...//some operation
    $('.loading-gif').hide();
  });

【讨论】：

【解决方案2】：

尝试设置 async:true ，因为它允许渲染 UI 元素以及 ajax 调用

【讨论】：

【解决方案3】：

Jquery done 函数仅在 ajax 请求成功完成时运行，因此在 ajax done 函数中调用 $('.loading-gif').hide();。

所以 ajax 代码会是这样的。

$('.loading-gif').show();
$ajax({url:'',async:false})
  .done(function(){
    ...//some operation
    $('.loading-gif').hide();
  });

【讨论】：