javascript - Ajax call to complete success, before actually completing the call? - Stack Overflow

admin管理员组

文章数量:1401849

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...');
            },
        plete: 
            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 pleting the call and setting isProcessing = false;...

How do I achieve that?

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...');
            },
        plete: 
            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 pleting the call and setting isProcessing = false;...

How do I achieve that?

• javascript
• jquery
• ajax

Share Improve this question Follow edited Oct 9, 2012 at 12:37 EibergDK asked Oct 9, 2012 at 11:17 EibergDKEibergDK 56411 gold badge88 silver badges1919 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

This is normal behavior. Using show method requires some time for animation, so callback is called after plete. Why not to simplify your code to something like this:

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

Why wouldn't you use jQuery.Deferred object, instead of isProcessing?

Please check the code in this case (something like this):

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

本文标签： javascriptAjax call to complete successbefore actually completing the callStack Overflow