无法从iOS加载页面,但可以从笔记本电脑和Android设备加载

时间:2017-05-23 04:25:09

标签: javascript jquery ios ajax frontend

嘿伙计我正在构建一个通过AJAX从Twitch API请求数据的站点。该网站在桌面和我的Android手机上完美加载。但不知何故,当我在iPod Touch 5和iPhone 5上试用它时,似乎ajax请求永远不会停止,因此无法将数据附加到我的页面。
这是我的网站:https://aaazureee.github.io/twitch/
这是我HTML的正文部分:

<div class="cover-container">
  <h3 class="masthead-brand animated slideInDown"><i class="fa fa-twitch" aria-hidden="true"></i> My Twitch Streamer List</h3>
</div>

<div class="loading">
  <img alt="loading" src="https://i.imgur.com/WQESRkB.gif">
</div>
<div class="test">

  <table class="table table-hover table-bordered">
    <thead>

    </thead>
    <tbody>

    </tbody>
  </table>
</div>

<div class="footer">
  <p class="text-muted">A Twitch-API project by <a href="https://twitter.com/4headlul" target="_blank">@4headlul</a></p>

</div>

JS档案:

$(document).ready(function() {
  var streamList = ["HSdogdog", "AdmiralBulldog", "vanNDota", "DreamLeague", "WubWoofWolf", "17uu", "lamperkat", "febbydoto", "Arteezy", "AmazHS", "Moonmeander", "WagamamaTV", "dotademon", "feardota", "esl_dota2", "monkeys_forever", "Dendi", "sheevergaming", "BigDaddy", "Draskyl", "Chessie", "FollowAkke", "bOne7", "attackerdota", "noobfromua", "egm", "qojqva", "alohadancetv", "pajkattdota", "dotastarladder_en", "barnyyy", "zai", "aui_2000", "universedota", "ppd", "fogged", "purgegamers", "meraclechamlotte", "7ckngmad", "miracle_doto", "puppey", "h4nn1", "420jenkins", "illidanstrdoto", "sumaildoto", "jeraxai", "grandgrant", "jeyodude", "bananaslamjamma", "yawar_", "merlinidota", "beyondthesummit", "s4", "stormspirittv", "synderen", "funn1k", "emperorpenguin83", "kano", "miserytheslayer", "reimudesu", "shigetora", "matumbaman", "era17", "sneykingdota", "siractionslacks", "moodota2", "dizzykitten", "sakurafrost225", "Rafis0", "odpixel", "d47biryu", "vampyrette", "w33haa", "blitzdota", "ritsugamer", "limmp", "himegurecia", "dotamajor", "babyknight", "ccncdota2", "khezzu", "lil_hardy", "angelsimosu", "vankhoahoang", "resolut1ontv", "blackdotatv", "sing_sing", "midone", "eternalenvyy", "dotacapitalist", "keemerah", "osu_HDHR", "mssdota", "epicenter_en1", "koushudota", "yapzordota", "moonducktv", "pikachama", "qSnake_", "stan_king", "dota2fata", "madaradota2", "braxton911", "cr1tdota", "mikah138", "evilgeniuses", "dotagasm", "official_niqua", "arise_3012", "nooneboss", "forev", "ramzesdoto", "aliastar", "bububu", "0timado0", "envybaer", "smashdota", "nurbika", "brinkdota", "canceldota", "qodota2", "day9tv", "zingle313", "kvhdota", "abed_dota", "ohaiyodota", "boris_dota", "gorgcc", "ltt98", "pgl_dota", "spare", "hfndota", "happystick", "itshafu", "thijshs", "qsnake", "lizzarddota2", "ek0p", "godot", "chainsito11", "freecodecamp"];
  var online = [];
  var offline = [];
  var k = 0;
  for (let i = 0; i < streamList.length; i++) {
    $.ajax({
        url: "https://api.twitch.tv/kraken/streams/" + streamList[i] + "?client_id=rznf9ecq10bbcwe91n6hhnul3dbpg9",
        dataType: 'json'
      })
      .done(function(data) {
        if (data.stream !== null) {
          online[k++] = {
            channel: data.stream.channel.display_name,
            game: data.stream.game,
            title: data.stream.channel.status,
            viewer: data.stream.viewers,
            icon: data.stream.channel.logo
          };
        } else if (data.stream === null) {
          $.ajax({
              url: "https://api.twitch.tv/kraken/channels/" + streamList[i] + "?client_id=rznf9ecq10bbcwe91n6hhnul3dbpg9",
              dataType: 'json'
            })
            .done(function(data2) {
              offline.push({
                channel: data2.display_name,
                game: data2.game,
                title: data2.status,
                viewer: "Offline",
                icon: data2.logo
              });
            });
        }
      });
  }
  $(document).ajaxStop(function() {
    $("table").addClass("animated fadeIn");
    $(".loading").detach();
    online.sort(function(a, b) {
      if (a.viewer > b.viewer) {
        return -1;
      } else if (a.viewer < b.viewer) {
        return 1;
      }
      return 0;
    });

    $("thead").append("<tr><th style='width:25%' class = 'channel'>Channel</th><th class = 'game' style = 'width:20%'>Game</th><th>Title</th><th style = 'width: 15%'>Viewers</th></tr>");

    for (var i = 0; i < online.length; i++) {
      if (online[i].icon !== null) {
        $(".table").append("<tr><td class='name'><img class ='icon' src ='" + online[i].icon + "'>" + online[i].channel + "</td><td>" + online[i].game + "</td><td>" + online[i].title + "</td><td><span id='red'></span> " + online[i].viewer + "</td></tr>");
      } else if (online[i].icon === null) {
        $(".table").append("<tr><td class='name'><img class ='icon' src='https://i.imgur.com/0C7WUis.png'>" + online[i].channel + "</td><td>" + online[i].game + "</td><td>" + online[i].title + "</td><td><span id='red'></span> " + online[i].viewer + "</td></tr>");
      }
    }

    for (var j = 0; j < offline.length; j++) {
      if (offline[j].icon !== null) {
        $(".table").append("<tr><td class='name' style='color:#B2ADBF'><img class ='icon-offline' src ='" + offline[j].icon + "'>" + offline[j].channel + "</td><td style='color:#B2ADBF'><em>" + offline[j].game + "</em></td><td style='color:#B2ADBF'>" + offline[j].title + "</td><td style='color:#B2ADBF'>" + offline[j].viewer + "</td></tr>");
      } else if (offline[j].icon === null) {
        $(".table").append("<tr><td class='name' style='color:#B2ADBF'><img class ='icon-offline' src='https://i.imgur.com/0C7WUis.png'>" + offline[j].channel + "</td><td style='color:#B2ADBF'><em>" + offline[j].game + "</em></td><td style='color:#B2ADBF'>" + offline[j].title + "</td><td style='color:#B2ADBF'>" + offline[j].viewer + "</td></tr>");
      }
    }

    $("tbody tr").click(function() {
      window.open("https://www.twitch.tv/" + $(this).find('td.name').text());
    });
  });


});

所以基本上在iOS上,#loading gif永远不会消失,并且没有数据加载到表中,我想ajax请求永远不会停止,因此它不会执行$(document).ajaxStop()中的代码

任何人都可以帮我解决这个问题吗?是仅仅是我的设备烦恼或网站无法按预期工作?

0 个答案:

没有答案