如何避免3次ajax调用？

Question

我编写了一些代码，用于在您选择国家/地区后过滤省/州选择字段：

    var cache = {};

    function updateProvinceOptions($select, values, initial) {
            for(i in values) {
                    $select.append('<option value="'+values[i][0]+'">'+values[i][1]+'</option>');
            }
            $select.val(initial).trigger('change');
    }

    $('<select class="province" />').insertBefore('.province').change(function() { // insert select boxes beside hidden province inputs
            $(this).siblings('input.province').val($(this).val()); // update hidden input with current value
    });

    $('.country').change(function() {
            var $countrySel = $(this);
            var $provSel = $countrySel.parent().parent().next().children('td').children('select.province');
            var $provInput = $provSel.siblings('input.province');
            var country = $countrySel.val();
            var province = $provInput.val();

            $provSel.empty();
            if(country in cache) {
                    updateProvinceOptions($provSel, cache[country], province);
            }
            else {
                    $provSel.addClass('loading');
                    $.getJSON('/get-provinces.json', {'country':country}, function(provinces) {
                            $provSel.removeClass('loading');
                            cache[country] = provinces;
                            updateProvinceOptions($provSel, provinces, province);
                    });
            }
    }).trigger('change');

它甚至缓存结果，因此，如果您选择加拿大，然后选择美国，然后再次选择加拿大，它就不必第二次访问加拿大省份列表的服务器。但是，我同时在页面上显示了其中的3个。当页面第一次加载时，缓存中没有任何内容，因此所有3个em都命中服务器以获取省份列表，因为所有ajax调用都还没有返回。

如果对那个国家的ajax调用已经在进行中，有没有一种相对简单的方法告诉它“等待”？或者我该不该操心？

Answer 1

不要紧..。在回答spinon时，我再次回答了自己的问题。毕竟，添加一个“等待”队列并不难：

    var cache = {};
    var retrieving = {};

    function updateProvinceOptions($select, values, initial) {
            for(i in values) {
                    $select.append('<option value="'+values[i][0]+'">'+values[i][1]+'</option>');
            }
            $select.val(initial).trigger('change');
    }

    $('<select class="province" />').insertBefore('.province').change(function() { // insert select boxes beside hidden province inputs
            $(this).siblings('input.province').val($(this).val()); // update hidden input with current value
    });

    $('.country').change(function() {
            var $countrySel = $(this);
            var $provSel = $countrySel.closest('tr').next('tr').find('select.province');
            var $provInput = $provSel.siblings('input.province');
            var country = $countrySel.val();
            var province = $provInput.val();

            $provSel.empty();
            if(country in cache) {
                    updateProvinceOptions($provSel, cache[country], province);
            } else if(country in retrieving) {
                    retrieving[country].push($provSel);
            }
            else {
                    retrieving[country] = [$provSel]
                    $provSel.addClass('loading');
                    $.getJSON('/get-provinces.json', {'country':country}, function(provinces) {
                            $provSel.removeClass('loading');
                            cache[country] = provinces;
                            while(retrieving[country].length > 0) {
                                    $select = retrieving[country].pop();
                                    updateProvinceOptions($select, provinces, province);    
                            }                               
                    });
            }
    }).trigger('change');

Answer 2

我想说的是，可以在方法之外添加一个缓存属性或其他对象，以指示当前是否正在加载缓存。在调用ajax方法之前将该值设置为true，然后在ajax调用的成功函数中将其设置为false。如果为真，则跳过任何后续调用，直到该值为false。

只有一种可能的解决方案。

Answer 3

我会说这取决于用例。用户总是需要通过这些元素吗？如果是这样的话，我可能倾向于在页面加载时获取所有数据，甚至在一开始就将数据与页面一起发送。

也取决于你正在处理的项目数量，也许自动完成会是一个更好的解决方案。

我真的需要一个更好的感觉，为应用程序提供更强烈的建议