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

在实际完成通话之前，Ajax呼叫完成成功？

2 个答案: