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

isProcessingの代わりにjQuery.Deferredオブジェクトを使用しないのはなぜですか?

この場合のコードを確認してください (このようなもの):

     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 に答える