如何避免 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

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

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

Answer 2

没关系..在回复 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 3

我会说这取决于用例。用户是否总是必须通过这些元素？如果是这样，我可能倾向于在页面加载时抓取所有数据，甚至首先将数据与页面一起发送。

还取决于您要处理的项目数量，也许自动完成会是更好的解决方案。

真的需要更好的感觉让应用程序更强烈地建议