嘿伙计我正在构建一个通过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()
中的代码
任何人都可以帮我解决这个问题吗?是仅仅是我的设备烦恼或网站无法按预期工作?