Question

我有3个JSON文件（provinces.json，citys.json，barangays.json）。

JSON文件中列出了88个省。每个省有很多城市，每个城市都有很多街区。

provinces.json 具有以下示例内容：（省约88条记录）

{
  'provCode': 01,
  'provName': 'Province Name'
}

cities.json 具有以下示例内容：（城市大约有1647条记录）

{
  'ctyCode': 001,
  'ctyName': 'City Name',
  'provCode: 01
}

barangays.json 具有以下示例内容：（barangays大约有8197条记录）

{
  'brgyCode': 0001,
  'brgyName': 'Barangay Name',
  'ctyCode': 001,
  'provCode: 01
}

我对每个触发了onchange事件以填充下一个下拉选择的JSON文件使用1个下拉选择。

相关代码如下：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  populateProvince();

  $('#province').change(function() {
    populateCity();
  });

  $('#city').change(function() {
    populateBrgy();
  });

  function populateProvince() {
    $('#province').html('');
    $.getJSON('provinces.json', function(data){
      $.each(data, function(index, object) {
        $('#province').append(`<option data-code="${object.provCode}" value="${object.provName.toUpperCase()}">${object.provName.toUpperCase()}</option>`);
      });
    });
  }

  function populateCity() {
    $('#city').html('');
    $.getJSON('cities.json', function(data){
      $.each(data, function(index, object) {
        if(object.provCode === $('#province option:selected').data('code')) {
          $('#city').append(`<option data-code="${object.ctyCode}" value="${object.ctyName.toUpperCase()}">${object.ctyName.toUpperCase()}</option>`);
        }
      });
    });
  }

  function populateBrgy() {
    $('#brgy').html('');
    $.getJSON('barangays.json', function(data){
      $.each(data, function(index, object) {
        if(object.provCode === $('#province option:selected').data('code') && object.ctyCode === $('#city option:selected').data('code')) {
          $('#brgy').append(`<option data-code="${object.brgyCode}" value="${object.brgyName.toUpperCase()}">${object.brgyName.toUpperCase()}</option>`);
        }
      });
    });
  }
});
</script>
<select id='province'></select>
<select id='city'></select>
<select id='brgy'></select>

基本上，我要做的是。加载页面后，我用provinces.json内容填充了省份选择下拉列表。

然后在选择省份后，我将迭代到cities.json并检查其是否与provCode匹配，如果它与选定的省份匹配，则会填充城市选择下拉列表。

如果与所选择的省份和城市匹配，则与barangay相同，则它将填充barangays select下拉列表。

人口众多的省市是可以容忍的。但是，当我开始遍历具有8000多个记录的barangay时，但是仅根据选定的省和城市追加大约20条记录，网页停止运行的时间大约是10秒钟或更长时间（旧计算机）和5秒钟（较新计算机）。

问题是，是否有一种有效的方法？如何加快迭代大型JSON文件的速度？

Answer 1

您可能只希望加载json文件一次，因此每次更改都可以避免通过网络调用

$(document).ready(function() {
  let provs,cities,barangays;

  $.getJSON('provinces.json').done((json) =>{
    provs=json;
    populateProvince();// wait till you get data for province
  })
   $.getJSON('cities.json').done(function(json){
    cities =json;
  })
   $.getJSON('provinces.json').done(function(json){
    barangays =json;
  })


  $('#province').change(function() {
    populateCity();
  });

  $('#city').change(function() {
    populateBrgy();
  });

  function populateProvince(){
    //rest of the code
  }
  function populateCity() {
    //rest of the code
  }
  function populateBrgy(){
    //rest of the code
  }

})

也不要在每次迭代中将option附加到dom上。而是创建一个变量并附加到该变量，然后仅将该变量附加一次

function populateProvince(){
    $('#province').html('');
    let provOptions = ''
      $.each(data, function(index, object) {
        provOptions += $(`<option data-code="${object.provCode}" 
                                value="${object.provName.toUpperCase()}">
                                ${object.provName.toUpperCase()}
                                </option>`)

      });
      $('#province').append(provOptions)
  }

是否可以加快JavaScript中大型JSON文件的迭代速度？

1 个答案: