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