Possibly pause until ajax request is complete or stop the ajax request?

I have a function that is called on a selectbox change event. Inside the function I have:

code:

            $("#male").ajaxAddOption(maleUrl, {}, false);
            $("#female").ajaxAddOption(femaleUrl, {}, false); 

That works as expected, but it is a little buggy. For example, if those ajax requests take some time to complete and if I call the function again while those ajax request are currently running, I will receive the first data while also receiving the second request's data. Now both requests will populate the selectboxes. That does not happen often, when it does it gets a bit annoying. I am not quite sure how to circumvent that issue. Any hints/ideas to keep that from happening? I was thinking of disabling the selectbox until the requests are finished, but I am not exactly sure how to accomplish that since I am using Select box manipulation from http://www.texotela.co.uk/code/jquery/select/ . I looked at the plugin's code and I noticed the plugin uses $.getJSON.

Edited plugin getJSON code:

$.fn.ajaxAddOption = function(url, params, select, fn, args)
{
    var ajaxRunning = false;

    $(window).ajaxStart(function () {
      ajaxRunning = true;
    }).ajaxStop(function () {
      ajaxRunning = false;
    });

    if(typeof(url) != "string") return this;
    if(typeof(params) != "object") params = {};
    if(typeof(select) != "boolean") select = true;
    this.each(
        function()
        {
            var el = this;
            if (!ajaxRunning) {

                $.getJSON(url,
                    params,
                    function(r)
                    {
                        $(el).addOption(r, select);
                        if(typeof fn == "function")
                        {
                            if(typeof args == "object")
                            {
                                fn.apply(el, args);
           开发者_如何学编程                 } 
                            else
                            {
                                fn.call(el);
                            }
                        }
                    }
                );
            }
        }
    );
    return this;
};

Editing the plugin code is not completely out of my range; however, I do not want to render the plugin unusable due to my lack of knowledge of the inner workings.

You're dealing with one of the finer quirks of AJAX - concurrency. You have a couple of options. You could set async to false for the requests, but I'd personally avoid that like the plague. Your better bet (IMHO) is to set up events based on ajaxStart and ajaxStop, with a state variable that prevents additional requests from firing. Something like this (though it will need to be adapted for your existing code).

var ajaxRunning = false;

$(window).ajaxStart(function () {
  ajaxRunning = true;
}).ajaxStop(function () {
  ajaxRunning = false;
});

That creates a variable you can use to control your requests with something like this:

$('.mySelect').change(function () {
  if (!ajaxRunning) {
    $.getJSON(); // Your complete code here.
  }
});

That sets it up so that the change handler for the select list will only fire its AJAX call if there is not currently one processing.

you need to abort the ajax call.

ajax = $.getJSON(//..params);

ajax.abort();

Both code examples were wonderful and I thank you both for assisting me. I did find a wonderful plugin for jquery that works flawlessly at the moment for my needs. link: http://code.google.com/p/jquery-ajaxq/ ajaxq stores each ajax request into a queue and fires them in order as the request finishes.