Question

我想要的是向我的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个东西，然后调用{{ 1}}之后。

所有show()来电都AJAX设置为async。我有5个false来电，每个AJAX来电都依赖于上次来电中提取的数据，我无法将AJAX设置为async，是否有解决此问题的方法，并强制true显示图片，然后进行DOM来电？

Answer 1

您需要在AJAX hideLoader()函数中调用success，以便在ajax操作后隐藏。因为AJAX是异步的，所以在你的代码hideLoader()执行ajax调用并完成dom之前执行。

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

根据@Esailija comment完成回调之后隐藏的内容：

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

     },
     complete: function() {
         hideLoader();
     }
   })
});

Answer 2

你可以做下一步：

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

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

   },
   complete : function (){
       hideLoader();
   }
});

Answer 3

我建议采用以下方式：

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

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

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

意外的javascript函数行为

3 个答案: