0

我想要的是在我的 中添加一个加载器栏HTML，而我的方法会进行一些耗时的AJAX调用和DOM操作。

问题是，show()在调用完成之前，该方法不会显示加载器栏AJAX，我该如何解决这个问题？

我想强制使用该show()方法，然后执行AJAX调用和其他操作DOM，然后强制使用该hide()方法。

方法AJAX调用：

$('.my-button').on('click', function(){
   $('#display-loader').show();
   // ajax and dom manipulation
   $('#display-loader').hide();
});

编辑：似乎对我的问题存在一些误解。如果我将代码更改为此：

$('.my-button').on('click', function(){
   $('#display-loader').show();
   // ajax and dom manipulation
});

它仍然不会显示加载器栏，直到AJAX方法完成，就像它跳过show()方法，做AJAX一些事情，然后调用show()之后。

所有AJAX呼叫都async设置为false。我有 5 个AJAX调用，每个AJAX调用都依赖于从上一个调用中获取的数据，我无法设置asyncto true，有没有办法解决这个问题，并强制DOM显示图像，然后AJAX调用？

4

3 回答 3

1

您需要hideLoader()在 AJAXsuccess函数中调用，以便在 ajax 操作后隐藏。由于AJAX是异步的，因此在您的代码中hideLoader()执行完成 ajax 调用并完成 dom 内容之前。

$('.my-button').on('click', function(){
   showLoader();
   $.ajax({
     ....
     success: function() {
          hideLoader();
     } 
   });
});

根据@Esailija评论在完成回调后隐藏喜欢：

$('.my-button').on('click', function(){
   showLoader();
   $.ajax({
     ....,
     success: function(){

     },
     complete: function() {
         hideLoader();
     }
   })
});
于 2013-08-06T18:16:21.730 回答
1

你可以做下一步：

showLoader();
$.ajax({
   type : 'POST',
   url : url,
   data : postData,
   success : function (returnData) {

   },
   error : function (xhr, textStatus, errorThrown) {

   },
   complete : function (){
       hideLoader();
   }
});
于 2013-08-06T18:20:43.107 回答
-1

我建议可能采用以下方式：

$.ajax({
  .....
}).done(function () {
  hideLoader();
});

这将确保装载机消失。如果您的 ajax 不成功，则永远不会到达成功回调，然后加载程序将停留在页面上。

但这取决于场景。你也可以把它放在你的错误回调中。

于 2013-08-06T18:22:59.013 回答