<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。在调试 window 中，我发现每个 $.ajax 请求都运行良好。不知道为什么。

Answer 1

这是因为您的 displayAll() 函数是在 $.ajax 承诺返回之前执行的。而 allStreamInfo[j]["logo"] = data.logo; 函数中的 success callback 代码必须是 undefined。请务必阅读 How do I return the response from an asynchronous call?。你会知道$.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。

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

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

javascript

webstorm