Ajax请求加载时间太长

时间:2016-07-18 08:16:22

标签: javascript php jquery json ajax

我有一个关于传说联盟的网站。 我根据玩家的名字请求来自防暴游戏API的统计数据。 然后我得到关于json的信息。 然后我通过ajax从php页面获取信息到主页面。 但加载真的需要很长时间。 我注意到它每秒读取一个json注册表。

这是我的ajax代码:

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

}

如何让ajax调用运行得更快? 我还有另外两个函数,但它们只从json数组中读取一个东西。 非常感谢您的参与。 抱歉我的英语不好,如果代码看起来很糟糕,请抱歉。

1 个答案:

答案 0 :(得分:0)

(我还没有50个代表,所以我把它作为答案添加了。)

你有没有理由不抓住:

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

然后对您将获得的所有json数据进行排序?这样你就可以在一个ajax调用中得到你想要的所有信息,并且你可以运行一个循环来创建你的表,并进行你想做的任何计算。

通过为每位冠军单独进行:

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

你得到了相同的数据(据我所知),但是你通过多次ajax调用得到它,这对你来说非常缓慢。