Javascript ajax调用完成后调用函数_Javascript_Jquery_Ajax

Javascript ajax调用完成后调用函数

javascript jquery ajax

Javascript ajax调用完成后调用函数,javascript,jquery,ajax,Javascript,Jquery,Ajax,我正在尝试使用twitch.tv的api来获取一些频道的信息。我有所有不同的通道，我试图在一个数组中获取有关这些通道的信息，我用一个forloop遍历该数组，然后在这个循环中为每个通道生成一个$.ajax（）。在我得到这些频道的信息后，我将它们存储在一个对象中，然后根据频道当前是流媒体还是离线，将其推送到不同的阵列上。我的问题似乎是，当我调用display方法并将divs html更改为有关频道的信息时，一些请求尚未完成，因此我没有将所有频道添加到页面上。所以我的问题是，在这段代码中，我应该在哪

我正在尝试使用twitch.tv的api来获取一些频道的信息。我有所有不同的通道，我试图在一个数组中获取有关这些通道的信息，我用一个forloop遍历该数组，然后在这个循环中为每个通道生成一个$.ajax（）。在我得到这些频道的信息后，我将它们存储在一个对象中，然后根据频道当前是流媒体还是离线，将其推送到不同的阵列上。我的问题似乎是，当我调用display方法并将divs html更改为有关频道的信息时，一些请求尚未完成，因此我没有将所有频道添加到页面上。所以我的问题是，在这段代码中，我应该在哪里调用display函数，以及是否有更好的方法来实现我想要实现的目标。提前谢谢这是代码


Twitch.TV API
名称
地位
$streamers=[“ESL_SC2”、“OgamingSC2”、“cretetion”、“freecodecamp”，
“斯托贝克”、“哈巴锡”、“机器人卡莱布”，
“Noobs2nijas”、“brunofin”、“comster404”、“Zxxxxxzzxxc”]；
$OnlineChannel=[]；
$offlineChannels=[]；
$ClosedChannel=[]；
$nonExistantChannels=[]；
函数getStreamInfo（回调）{
对于（$i=0；$i您可以像这样使用Deferred
数组，并在解析所有延迟对象后调用回调

$streamers=[“ESL_SC2”、“OgamingSC2”、“cretetion”、“freecodecamp”，
“斯托贝克”、“哈巴锡”、“机器人卡莱布”，
“Noobs2nijas”、“brunofin”、“comster404”、“ZXCxxzzxxc”
];
$OnlineChannel=[]；
$offlineChannels=[]；
$ClosedChannel=[]；
$nonExistantChannels=[]；
函数getStreamInfo（）{
var deferred=[]；//延迟数组。
对于（$i=0；$i<$streamers.length；$i++）{
推(
$.ajax({
名称：$streamers[$i]，
长度：$拖缆。长度-1，
索引：$i，
网址：'https://api.twitch.tv/kraken/streams/“+$streamers[$i]，
数据类型：“JSON”，
成功：功能（数据）{
如果（data.stream！=null）{//如果有流信息
//添加到在线频道
//log（“它是一个流媒体频道”）；
$chanInfo={
“名字”：这个名字，
“游戏”：data.stream.game，
“状态”：data.stream.channel.status
};
$onlineChannels.push（$chanInfo）；
}否则{
//添加到脱机频道
//console.log（“当前未流媒体”）；
$chanInfo={
“名字”：这个名字，
“状态”：“脱机”
};
$offlineChannels.push（$chanInfo）；
}
},
错误：函数（数据）{
如果（data.status==422）{
//log（'addtoclosedchannels'）；
$chanInfo={
“名字”：这个名字，
“状态”：“帐户已关闭”
};
$closedChannels.push（$chanInfo）；
}
如果（data.status==404）{
//log（“添加到不存在的通道”）；
$chanInfo={
“名字”：这个名字，
“状态”：“不存在的通道”
};
$nonExistantChannels.push（$chanInfo）；
}
}//错误结束
})//ajax请求结束
);
}//for循环结束
return deferred；//返回数组
}//函数结束
函数displayChannels（）{
log（'do displayChannels function'）；
$chans=[$onlineChannels、$offlineChannels、$closedChannels]；
$html=“”；
对于（$i=0；$i<$onlineChannels.length；$i++）{
log（“生成html”）；
$html+=''+$OnlineChannel[$i][“名称”]+'+'+$OnlineChannel[$i][“状态”]+''
}
对于（$i=0；$i<$offlineChannels.length；$i++）{
log（“生成html”）；
$html+=''+$OfflineChannel[$i][“名称”]+'+'+$OfflineChannel[$i][“状态”]+''
}
对于（$i=0；$i<$closedChannels.length；$i++）{
log（“生成html”）；
$html+=''+$ClosedChannel[$i][“名称”]+'+'+$ClosedChannel[$i][“状态”]+''
}
log（$html）；
log（“即将添加html”）；
$（“.channelContainer”）.html（$html）；
log（“添加html”）；
}
var deferredArr=getStreamInfo（）；
//在所有ajax调用完成后调用回调
$.when.apply（null，deferredArr）.done（函数（）{
警报（“所有请求已完成！.Now calling DisplayChannel”）；
显示通道（）；
})；

Twitch.TV API
名称
地位

在jquery支持功能时使用$
它像承诺一样工作
希望这对您有用。
我已经看完了代码，除了调用方法之外，它似乎很好。在您的方法中，当加载DIV时，一些请求信息不在您身边
解决方案：在调用之后调用display方法，并从API获取所有信息

使API调用发生在“when块”内，然后在完成所有操作后，可以调用display方法将数据填充到视图层中
谢谢。
名称：$streamers[$i]，length:$streamers.length-1，index:$i，func:callback，在ajax中？除了在每个循环中使用$i之外。是否希望$i成为一个全局变量？@user2181397这正是我当前正忙于使用for循环遍历所有不同拖缆的拖缆的名称这些ajax属性是什么name:$streamers[$i]，长度：$streamers.length-1，索引：$i，？@madalinivasc
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script>
    </head>
<body>
    <div class="well">
        <h1>Twitch.TV API</h1>

    </div>

    <div class="row">
        <div class="col-sm-3 text-center">
            Name
        </div>

        <div class="col-sm-9 text-center">
            Status
        </div>
    </div>

    <div class="channelContainer">

    </div>
    <script>
        $streamers = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp",
        "storbeck", "habathcx", "RobotCaleb",
        "noobs2ninjas", "brunofin", "comster404","zxcxxxxzzxxxxc"];

        $onlineChannels = [];
        $offlineChannels = [];
        $closedChannels = [];
        $nonExistantChannels = [];

        function getStreamInfo(callback){
            for($i=0;$i<$streamers.length;$i++){
                $.ajax({
                    name:$streamers[$i],
                    length:$streamers.length-1,
                    index:$i,
                    func: callback,
                    url:'https://api.twitch.tv/kraken/streams/'+$streamers[$i],
                    dataType:'JSON',
                    success: function(data){

                        if(data.stream != null){//if there is stream information
                            //add to online channels
                            //console.log("its a streaming channel");
                            $chanInfo = {"name":this.name,"game":data.stream.game,"status":data.stream.channel.status};
                            $onlineChannels.push($chanInfo);
                        }else{
                            //add to offlineChannels
                            //console.log("currently not streaming");
                            $chanInfo = {"name":this.name,"status":"Offline"};
                            $offlineChannels.push($chanInfo);
                        }



                    },
                    error: function(data){
                        if(data.status === 422){
                            //console.log('add to closedChannels');
                            $chanInfo = {"name":this.name,"status":"Account closed"};
                            $closedChannels.push($chanInfo);
                        }

                        if(data.status === 404){
                            //console.log('add to nonExistantChannels');
                            $chanInfo = {"name":this.name,"status":"Non existant channel"};
                            $nonExistantChannels.push($chanInfo);
                        }
                    },//end of error                        
                    complete: function(){
                        if(this.index === this.length){
                            callback();
                        }
                    }
                });//end of ajax request

            }//end of for loop
        }//end of function

        function displayChannels(){
        console.log('doing displayChannels function');
        $chans = [$onlineChannels,$offlineChannels,$closedChannels];

        $html = "";
        for($i =0;$i<$onlineChannels.length;$i++){
            console.log("making the html");
            $html+= '<div class="row"><div class="col-sm-3 text-center">'+$onlineChannels[$i]["name"]+'</div><div class="col-sm-9 text-center">'+$onlineChannels[$i]["status"]+'</div></div>'

        }
        for($i =0;$i<$offlineChannels.length;$i++){
            console.log("making the html");
            $html+= '<div class="row"><div class="col-sm-3 text-center">'+$offlineChannels[$i]["name"]+'</div><div class="col-sm-9 text-center">'+$offlineChannels[$i]["status"]+'</div></div>'

        }
        for($i =0;$i<$closedChannels.length;$i++){
            console.log("making the html");
            $html+= '<div class="row"><div class="col-sm-3 text-center">'+$closedChannels[$i]["name"]+'</div><div class="col-sm-9 text-center">'+$closedChannels[$i]["status"]+'</div></div>'

        }
        console.log($html);
        console.log("about to add html");
        $(".channelContainer").html($html);
        console.log("html added");
        }

        getStreamInfo(displayChannels);
    </script>
</body>

$.when(ajax1(), ajax2(), ajax3(), ajax4()).done(function(a1, a2, a3, a4){
// the code here will be executed when all four ajax requests resolve.
// a1, a2, a3 and a4 are lists of length 3 containing the response text,
// status, and jqXHR object for each of the four ajax calls respectively.
});

function ajax1() {
// NOTE:  This function must return the value 
//        from calling the $.ajax() method.
return $.ajax({
    url: "someUrl",
    dataType: "json",
    data:  yourJsonData,            
    ...
});
}