<undefined：1 get =“”http：=“”localhost：63342 =“”twitchtv =“”undefined =“”404 =“”（not =“”找到）=“”>

时间：2016-12-13 04:39:11

标签： javascript webstorm

Error_state_photo 

        $(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问题。这是post。今天早上我在控制台中收到此404 not found错误消息。它就像之前的页面一样。仍然有很多undefine in page。在调试窗口中，我发现每个$.ajax请求都运行良好。我不知道为什么。

1 个答案:

答案 0 :(得分：0)

这是因为在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。

相关问题
最新问题