<undefined:1 GET http://localhost:63342/Twitchtv/undefined 404 (Not Found)>

Question

  $(document).ready(function () { loadStreamInfo(); displayAll(); }); var allStreamInfo = [{"user" : "ogaminglol"},{"user" : "faceittv"},{"user" :"twitch"},{"user" :"hearthstonesea"},{"user" :"stephensonlance"},{"user" :"aegabriel"}]; function loadStreamInfo() { for(var i = 0; i < 6; i++) { (function (j) { $.ajax({ url:("https://wind-bow.gomix.me/twitch-api/streams/" + allStreamInfo[j].user), jsonp: "callback", dataType: "jsonp", success: function (data) { if(data.stream == null){ allStreamInfo[j]["status"] = "offline"; } else { allStreamInfo[j]["status"] = "online"; } } }); })(i) } for(var i = 0; i < 6; i++) { (function (j) { $.ajax({ url:("https://wind-bow.gomix.me/twitch-api/channels/" + allStreamInfo[j].user), jsonp : "callback", dataType : "jsonp", success: function (data) { allStreamInfo[j]["logo"] = data.logo; allStreamInfo[j]["gameName"] = data.game; allStreamInfo[j]["views"] = data.views; allStreamInfo[j]["followers"] = data.followers; allStreamInfo[j]["url"] = data.url; } }); })(i) } } function displayAll() { for(var i = 0; i < 6; i++){ (function (j) { var outString = ""; outString += "<div class='item'>"; outString += "<img src='" + allStreamInfo[j].logo + "' alt='logo'>"; outString += "<a href='" +allStreamInfo[j].url + "'><span id='gameName'>" + allStreamInfo[j].gameName +"</span></a>"; outString += "<span id='state'>"+ allStreamInfo[j].status+"</span>"; outString += "<span id='views-block'>Views:<span id='view'>" + allStreamInfo[j].views + "</span></span>"; outString += "<span id='follow-block'>Followers:<span id='followed'>" + allStreamInfo[j].followers +"</span></span>"; outString += "</div>"; $("#result").append(outString); })(i) } } 

 body { padding: 40px;; } .toggle-button { width: 400px; color: white; height: 100px; text-align: center; margin: 0 auto; } .all { background-color: #6699CC; width: 30%; height: 70px; line-height: 70px; border-right: 2px solid grey; display: inline; float: left; cursor: pointer; } .online { cursor: pointer; line-height: 70px; background-color: cadetblue; border-right: 2px solid grey; width: 30%; height: 70px; display: inline; float: left; } .offline { cursor: pointer; background-color: darkorange; line-height: 70px; width: 30%; height: 70px; display: inline; float: left; } #result { margin-top: 30px; } .item { width: 500px; height: 70px; margin: 5px auto; background-color: #666699; border-left: 4px solid red; color: whitesmoke; /*border: 2px solid red;*/ } a { text-decoration: none; } img { width: 50px; height: 50px; margin-top: 10px; margin-left: 20px; margin-right: 21px; } span#gameName,span#views-block,span#state ,span#follow-block { position: relative; bottom: 18px; } span#gameName,span#state,span#views-block{ margin-right: 21px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="toggle-button"> <div class="all" onclick="displayAll()">All</div> <div class="online" onclick="displayOnline()">Online</div> <div class="offline" onclick="displayOffline()">Offline</div> </div> <div id="result"> </div> 

昨天之后，我解決了hoisting問題。 這是帖子 。今天早上，我在控制台中收到此404 not found錯誤消息。 就像之前的頁面一樣。 undefine in page還有很多undefine in page 。在調試窗口中，我發現每個$.ajax請求都運行良好。 我不知道為什么

Answer 1

這是因為在$.ajax承諾返回之前，已執行了displayAll()函數。 並且allStreamInfo[j]["logo"] = data.logo; success callback函數中的此類代碼必須undefined 。 請閱讀如何從異步調用返回響應？ 。 您將了解$.ajax的基本原理。 這是我的代碼：

  $(document).ready(function () { loadStreamInfo(); }); var allStreamInfo = [{"user" : "ogaminglol"},{"user" : "faceittv"},{"user" :"twitch"},{"user" :"hearthstonesea"},{"user" :"zondalol"},{"user" :"aegabriel"}]; function loadStreamInfo() { for(var i = 0; i < 6; i++) { (function (j) { $.ajax({ url:("https://wind-bow.gomix.me/twitch-api/streams/" + allStreamInfo[j].user), async: false, jsonp: "callback", dataType: "jsonp", success: function (data) { if(data.stream == null){ allStreamInfo[j]["status"] = "offline"; } else { allStreamInfo[j]["status"] = "online"; } $.ajax({ url:("https://wind-bow.gomix.me/twitch-api/channels/" + allStreamInfo[j].user), async: false, jsonp : "callback", dataType : "jsonp", success: function (data) { allStreamInfo[j]["logo"] = data.logo; allStreamInfo[j]["gameName"] = data.game; allStreamInfo[j]["views"] = data.views; allStreamInfo[j]["followers"] = data.followers; allStreamInfo[j]["url"] = data.url; displayAll(j); } }); } }); })(i) } } function displayAll(i) { var outString = ""; outString += "<div class='item'>"; outString += "<img src='" + allStreamInfo[i].logo + "' alt='logo'>"; outString += "<a href='" +allStreamInfo[i].url + "'><span id='gameName'>" + allStreamInfo[i].gameName +"</span></a>"; outString += "<span id='state'>" + allStreamInfo[i].status+"</span>"; outString += "<span id='views-block'>Views:<span id='view'>" + allStreamInfo[i].views + "</span></span>"; outString += "<span id='follow-block'>Followers:<span id='followed'>" + allStreamInfo[i].followers +"</span></span>"; outString += "</div>"; $("#result").append(outString); } 

 body { padding: 40px; } .toggle-button { width: 400px; color: white; height: 100px; text-align: center; margin: 0 auto; } .all { background-color: #6699CC; width: 30%; height: 70px; line-height: 70px; border-right: 2px solid grey; display: inline; float: left; cursor: pointer; } .online { cursor: pointer; line-height: 70px; background-color: cadetblue; border-right: 2px solid grey; width: 30%; height: 70px; display: inline; float: left; } .offline { cursor: pointer; background-color: darkorange; line-height: 70px; width: 30%; height: 70px; display: inline; float: left; } #result { margin-top: 30px; } .item { width: 500px; height: 70px; margin: 5px auto; background-color: #666699; border-left: 4px solid red; color: whitesmoke; /*border: 2px solid red;*/ } a { text-decoration: none; } img { width: 50px; height: 50px; margin-top: 10px; margin-left: 20px; margin-right: 21px; } span#gameName,span#views-block,span#state ,span#follow-block { position: relative; bottom: 18px; } span#gameName,span#state,span#views-block{ margin-right: 21px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="toggle-button"> <div class="all" onclick="displayAll()">All</div> <div class="online" onclick="displayOnline()">Online</div> <div class="offline" onclick="displayOffline()">Offline</div> </div> <div id="result"> </div> 

您必須將display()函數放入success callback 。 唯一的缺點是您無法控制哪個(function(j){...})(i)首先執行。 那是因為asynchronous 。