выполнение не в порядке внутри функции обратного вызова ajax javascript

Question

У меня есть следующая операция ajax, предназначенная для (1) show spinner gif перед отправкой ajax запроса и после того, как запрос завершен, (2) hide gif и 3 display соответствующие сообщения с предупреждениями.Наконец (4) reload страница.

Вот код:

$.ajax({
   url: rUrl,
   data: {
      id: rID,
      requisitionStatus: rStatus,
      comment: rComment
   },
   type: "POST",
   cache: false,
   beforeSend: function() {
      $("#requisitionStatusDialog").dialog('close');
      $('#ajax_loader_my').show();
   },
   success: function(data, resp) {
      var json = data;
      var obj = JSON && JSON.parse(json) || $.parseJSON(json);
      if (obj.status == "success") {
         alert('Success! ' + obj.message);
         location.reload();
      } else if (obj.status == "error") {
         alert('Error!' + obj.message);
      }
   },
   error: function(data, resp) {
      $("#updateDialog").dialog('close');
      console.log(resp);
   },
   complete: function() {
      $('#ajax_loader_my').hide();
   }
});

Но в этом случае сначала появляется alert, в то время как spinner gif все еще появляется, и reloadsстраница после нажатия OK.

Я даже попробовал hiding GIF-файл в success самом обратном вызове вместо использования complete:

success: function(data, resp) {
  var json = data;
  var obj = JSON && JSON.parse(json) || $.parseJSON(json);
  if (obj.status == "success") {
     $('#ajax_loader_my').hide();
     alert('Success! ' + obj.message);
     location.reload();
  } else if (obj.status == "error") {
     alert('Error!' + obj.message);
  }

},

Оба дают одинаковый результат.

Answer 1

Причина, по которой ваше предупреждение появляется перед скрытием счетчика, заключается в том, что код успеха запускается до завершения, что скрывает счетчик. Причина перезагрузки в том, что после оповещения вы отправляете location.reload ();

Проверьте, что $ ('# ajax_loader_my'). Hide (); на самом деле прячет спиннер. Элемент, который содержит или содержит счетчик в вашем html, должен иметь идентификатор, равный ajax_loader_my.

Если вы откроете инструменты Chrome или Firefox Dev, вы сможете отправить $ ('# ajax_loader_my'). Hide () и посмотреть, что произойдет.

Answer 2

Привет, попробуй использовать обещания, вот документация Обещания Jquery , я сделал это на лету, могут быть ошибки, но это всего лишь пример:

$( function() {
  function AjaxCall(rID,rStatus,rComment){
    return $.ajax({
      url: 'request.php',
      data: {
        id: rID,
        requisitionStatus: rStatus,
        comment: rComment    
      },
      type: "POST",
      cache: false,
      beforeSend: function() {
        $("#requisitionStatusDialog").dialog('close');
        $('#ajax_loader_my').show();
      }
    })
  }


  $( "#requisitionStatusDialog" ).dialog();

  $("#yourbuttonInputId").on('click',function(event) {
    AjaxCall().done(function(data,response){
      var obj = JSON.parse(data);
      if (obj.status == "success") {
        alert('whe are on done!');
      }
    }).fail(function(data,response){
      $("#updateDialog").dialog(' close');
    }).always(function(data){
      if(confirm('You have finished the request.  Click OK if you wish to continue ,click Cancel to reload the page.'))
      {
        $('#ajax_loader_my').hide();
        $("#requisitionStatusDialog").dialog('open');
      }else{
        location.reload();
      }

    });
  });
} );

РЕДАКТИРОВАТЬ: Проверьте это jsfiddle Это поможет вам разработать ваш код

Надеюсь, что это поможет

Answer 3

Перепишите код таким образом, это поместит ваш код, связанный с предупреждением и местоположением, в очередь событий, которая будет запущена, когда она станет свободной.

if(obj.status=="success") { 
      $('#ajax_loader_my').hide(); 
      setTimeout(function(){
          alert('Success! '+obj.message);
          location.reload();
      },0);
}

Answer 4

Я бы предпочел использовать пустой div или span с идентификатором.Чем отображать успех в HTML этого div.Например:

$('#ajax_loader_my').hide();    
setTimeout(function () { 
    $('#successDiv').html('Success! ' + obj.message);
    location.reload();
}, 2000);