Неожиданное поведение функции javascript

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(); 
}); 

EDIT: Похоже, что есть какое-то недоразумение, как к тому, что моя проблема. Если я изменить код для этого:

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

Он по-прежнему не будет показывать бар погрузчика, до тех пор пока Аякс метода сделана, как он пропускает метод шоу(), делает АЯКС вещь, а затем вызывает show() впоследствии.

Все вызовы ajax имеют асинхронный набор в значение false. У меня есть 5 вызовов ajax, и каждый вызов ajax зависит от данных, полученных от предыдущего вызова, у меня нет способа установить асинхронное значение true, есть ли способ обойти это и заставить dom отображать изображение и затем делать ajax звонки?

Answer 1

Вам необходимо позвонить по телефону hideLoader() в функции AJAX success, чтобы скрыть после операции ajax. Поскольку AJAX является асинхронным, поэтому в вашем коде hideLoader() выполните перед тем, как закончить вызов ajax и сделать профайл.

$('.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(); 
}); 

Это гарантирует, что погрузчик уйдет. Если ваш аякс не увенчался успехом, то обратный вызов успеха никогда не будет достигнут, а затем загрузчик останется на странице.

Но это зависит от сценария. Вы также можете просто поместить его в обратный вызов ошибки.