Ajax请求加载时间太长

Question

I have a website about league of legends. I request statistics from riot games API based on player's name. Then i get the information on json. Then i get the information from the php page to the main page with ajax. But it really takes too long to load. I noticed that it reads one json registry every one second.

Here is my ajax code:

function getStats (SUMMONER_ID, API_KEY) {
  var Topuser = SUMMONER_ID
  var theStatsDiv = document.getElementById('deaths')
  $.ajax({
    url: 'getKey.php',
    type: 'post',
    dataType: 'json',
    async: false,
    data: {urlLinked: 'https://' + regionSelected + '.api.pvp.net/api/lol/' + regionSelected + '/v1.3/stats/by-summoner/' + SUMMONER_ID + '/ranked?season=SEASON2016&api_key='},
    success: function (json) {
      var user = Topuser

      for (var i = 0; i < json.champions.length; i++) {
        if (json.champions[i].id != 0) {
          var wins = json.champions[i].stats.totalSessionsWon
          var loses = json.champions[i].stats.totalSessionsLost
          var $div = $('<div>', {id: 'champion' + i, class: 'championClass', 'percentage': wins + loses})
          $('#deaths').append($div)

          var ratio = 0

          if (wins == 0) {
            ratio = 0
          }
          if (loses == 0) {
            ratio = 100
          }
          if (wins != 0 && loses != 0) {
            ratio = (wins / (wins + loses)) * 100
            ratio = ratio.toFixed(0)
          }


          $.ajax({
            url: 'getKey.php',
            type: 'post',
            dataType: 'json',
            async: false,
            data: {urlLinked: 'https://global.api.pvp.net/api/lol/static-data/' + regionSelected + '/v1.2/champion/' + json.champions[i].id + '?api_key='},
            success: function (json) {
              championIcon = json.name
              var tempDif = 0
              tempDif = wins - loses
              if (tempDif > maxDifference) {
                difChampionName = ''
                maxDifference = 0
                maxDifference = tempDif
                maxRatio = ratio
                difChampionName = json.name
              }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
              var user = Topuser
              console.log(errorThrown)
              if (errorThrown === 'Not Found') {
              }
            }
          })

          var result = championIcon.replace(/[^A-Z0-9]+/ig, '')
          $('#champion' + i).append('<div class="championWrapper" id="championWrapper' + i + '">')
          $('#championWrapper' + i).append('<p class="championName">' + championIcon + '</p><br>')
          $('#champion' + i).css('background-image', 'url(http://ddragon.leagueoflegends.com/cdn/img/champion/splash/' + result + '_0.jpg)')


          if (ratio >= 50) {
            $('#championWrapper' + i).append("Stuff.....")
          }
          if (ratio < 50) {
            $('#championWrapper' + i).append("More stuff.....")
          }

        }
      }

    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      var user = Topuser
      console.log(errorThrown)
      if (errorThrown === 'Not Found') {
        document.getElementById('deaths').innerHTML = 'not found'
      }
    }
  })

}

What can i do to make ajax calls run faster? I also have another 2 functions but they only read one thing from the json array. Thank you so much for your time. Sorry for my bad English and sorry if the code looks bad.

Answer 1

(I don't yet have 50 rep, so I've added this as an answer instead.)

Is there any reason you're not grabbing:

/api/lol/static-data/{region}/v1.2/champion

and then sorting through all of the json data that you'll get in return? That way you get all of the information you want in one ajax call, and you can run a loop to create your table, and make any calculations you'd like to make.

By doing it individually for each champion:

/api/lol/static-data/{region}/v1.2/champion/{id}

you're getting the same data (as far as I can tell) but you're getting it over multiple ajax calls, which is making things very slow for you.