javascript - 在实际完成通话之前，Ajax通话才能成功完成？

我正在尝试找出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。

我该如何实现？

最佳答案

这是正常现象。使用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...');
    }
});