Ajax звоните, чтобы завершить успех, прежде чем на самом деле завершить вызов?

Question

Я пытаюсь выяснить вызов ajax ... Мне нужен вызов, чтобы задержать и закончить загрузку содержимого HTML, прежде чем переходить еще раз (он запускается событием keyup) ... В противном случае возвращенный HTML фактически загружен много раз. В моем случае вызов ajax возвращает HTML, который затем выполняет JS-функцию. Но когда он загружается несколько раз, функция JS выполняется дважды = плохо.

Вот мой код (бдительные коробки только для помощи ...):

$(document).ready(function() { 

    var isProcessing = false; 

    $('#productSearchInput').keyup(function() { 

    var productSearchInput = $(this).val(); 
    var dataString = 'searchInput='+ productSearchInput; 
    var script_url = '../ajax/service-search.php'; 

    if(productSearchInput.length > 3 && isProcessing === false) { 
     $.ajax({ 
     type: 'GET', 
     url: script_url, 
     data: dataString, 
     beforeSend:  
      function() {  
      isProcessing = true; 
          alert('Processing input: ' + productSearchInput; 
      }, 
     success: 
      function(server_response) { 
      $('#searchresultdata').html(server_response).show('fast', function() { alert('Currently processing...'); }); 
      }, 
     error: 
      function() { 
      alert('ajax call failed...'); 
      }, 
     complete: 
      function() { 
      isProcessing = false; 
          alert('Processing done'); 
      } 
     }); 

    } 

    return false; 
    }); 
}); 

Что плохого в том, что «Обработка сделано» предупреждение появляется перед «Жди обработки» предупреждение .. . Затем после предупреждения «Обработка сделана» появляется предупреждение «Ожидать обработки».

мне нужен мой HTML server_response, чтобы показать, до завершения вызова и настройки isProcessing = ложь; ...

Как достичь этого?

Answer 1

Это нормальное поведение. Использование метода show требует некоторого времени для анимации, поэтому callback вызывается после завершения. Почему бы не упростить свой код, чтобы что-то вроде этого:

$.ajax({ 
    type: "GET", 
    url: script_url, 
    data: dataString, 
    beforeSend: function() {  
     isProcessing = true; 
     alert('Processing input: ' + productSearchInput); 
     }, 
    success: function(server_response) { 
     alert('Wait for processing...'); 
     $('#searchresultdata').html(server_response).show('fast', function() { 
      alert('Processing done'); 
      isProcessing = false; 
     });      
    }, 
    error: function() { 
     alert('ajax call failed...'); 
    } 
}); 

Answer 2

Почему бы не использовать jQuery.Deferred объект, вместо isProcessing?

Пожалуйста, проверьте код в этом случае (что-то вроде этого):

 var isProcessing = $.Deferred(); 

    $.ajax({ 
     type: "GET", 
     url: script_url, 
     data: dataString, 
     beforeSend: function() {  
      alert('Processing input: ' + productSearchInput); 
     }, 
     success: function(server_response) { 
      alert('Wait for processing...'); 
      $('#searchresultdata').html(server_response).show('fast', isProcessing.resolve);      
     }, 
     error: function() { 
      alert('ajax call failed...'); 
     } 
    }); 
    $.when(isProcessing).then(function(){alert('Processing done');});