2

I'm trying to figure out an ajax call... I need the call to hold up and finish loading HTML contents, before going over once again (it is triggered by keyup event)... Otherwise returned HTML is actually loaded multiple times. In my case the ajax call returns HTML which then executes a JS function. But when it gets loaded multiple times, JS function is executed twice = bad.

Here is my code (alert boxes are only for help...):

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

What is wrong is, that the "Processing done" alert appears before the "Wait for processing" alert... And then after "Processing done" alert has showed, the "Wait for processing" alert shows.

I need my HTML server_response to show, before completing the call and setting isProcessing = false;...

How do I achieve that?

4

2 回答 2

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...');
    }
});
于 2012-10-09T11:33:43.363 回答
1

你为什么不使用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');});
于 2012-10-09T12:14:11.383 回答