可能暂停直到ajax请求完成或停止ajax请求?

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

我有一个在selectbox更改事件上调用的函数。在我拥有的函数内部:代码:

            $("#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.

这是意料之中的事，但有点小毛病。例如，如果这些ajax请求需要一些时间来完成，如果在这些ajax请求正在运行时再次调用函数，我将接收第一个数据，同时也接收第二个请求的数据。现在两个请求都将填充selectboxes。这种情况并不经常发生，当它发生的时候就会有点烦人。我不太确定如何规避这个问题。有什么建议可以阻止这种情况发生吗?我想在请求完成之前禁用selectbox，但我不确定如何实现，因为我正在使用http://www.texotela.co.uk/code/jquery/select/中的Select box操作。我查看了插件的代码，发现插件使用$. getjson。

Edited plugin getJSON code:

编辑插件getJSON代码:

$.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.

编辑插件代码并不完全超出我的范围;但是，由于我对内部工作的缺乏了解，我不想让这个插件无法使用。

3 个解决方案

#1

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).

您正在处理AJAX的一个更好的怪癖——并发性。你有几个选择。您可以为请求设置async为false，但是我个人会像避免瘟疫一样避免这种情况。最好的方法(IMHO)是基于ajaxStart和ajaxStop设置事件，并使用状态变量来阻止其他请求触发。类似这样的东西(尽管需要对现有代码进行修改)。

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.

这样，select列表的更改处理程序将只在当前没有一个处理时触发其AJAX调用。

#2

you need to abort the ajax call.

您需要中止ajax调用。

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

ajax.abort();

#3

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.

这两个代码示例都很棒，我感谢你们的帮助。我确实找到了一个很棒的jquery插件，它可以完美地满足我的需要。链接:http://code.google.com/p/jquery-ajaxq/ ajaxq将每个ajax请求存储到一个队列中，并在请求完成时按顺序触发它们。

#1

var ajaxRunning = false;

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