如何避免 3 个 ajax 调用?

本文介绍了如何避免 3 个 ajax 调用?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

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

 var cache = {};函数 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() {//在隐藏省份输入旁边插入选择框$(this).siblings('input.province').val($(this).val());//用当前值更新隐藏输入});$('.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省 = $provInput.val();$provSel.empty();如果(缓存中的国家){updateProvinceOptions($provSel, 缓存[国家], 省);}别的 {$provSel.addClass('加载');$.getJSON('/get-provinces.json', {'country':country}, function(provinces) {$provSel.removeClass('loading');缓存[国家] = 省份；更新省选项($provSel，省，省)；});}}).trigger('改变');

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

如果对该国家/地区的ajax调用已经在进行中，是否有一种相对简单的方法可以告诉它等待"?还是我应该打扰?

解决方案

没关系.. 在回复 spinon 时再次回答了我自己的问题...毕竟添加一个等待"队列并不难:

>

 var cache = {};var 检索 = {};函数 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() {//在隐藏省份输入旁边插入选择框$(this).siblings('input.province').val($(this).val());//用当前值更新隐藏输入});$('.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 省 = $provInput.val();$provSel.empty();如果(缓存中的国家){updateProvinceOptions($provSel, 缓存[国家], 省);} else if(正在检索的国家){检索[国家].push($provSel);}别的 {检索[国家] = [$provSel]$provSel.addClass('加载');$.getJSON('/get-provinces.json', {'country':country}, function(provinces) {$provSel.removeClass('loading');缓存[国家] = 省份；而(检索[国家].长度> 0){$select = 检索[国家].pop();更新省选项($选择，省，省)；}});}}).trigger('改变');

I wrote some code that filters a province/state select field after you choose a country:

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

It even caches the results so that if you, say, choose Canada, then US, and then Canada again, it doesn't have to hit the server for the list of Canadian provinces a second time. However, I'm displaying 3 of these on the page at the same time. When the page first loads, there's nothing in cache, so all 3 of em hit the server for a list of provinces because none of the ajax calls have returned yet.

Is there a relatively simple way to tell it to "wait" if an ajax call for that country is already in progress? Or should I even bother?

解决方案

Nevermind.. answered my own question again when responding to spinon... it wasn't that hard to add a "waiting" queue after all:

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

这篇关于如何避免 3 个 ajax 调用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！