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

问题是，“处理完成”警报出现在“等待处理”警报之前......然后在“处理完成”警报显示之后，“等待处理”警报显示。

在完成调用和设置 isProcessing = false;...

之前，我需要显示我的 HTML server_response

我如何做到这一点？

Answer 1

这是正常行为。使用show 方法需要一些动画时间，所以在完成后调用回调。为什么不把你的代码简化成这样：

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