Loading a huge amount of video from youtube api with ajax - ajax

Question

I am trying to display more than 200 videos of a custom playlist (saved in my database). I want to show the whole list in a row, using ajax, with setInterval to let Youtube API breath a bit.
Here is my code :
for(var i in a.playlist_rows) {
iTime += 100;
setTimeout(function() {
$.ajax({
url:'https://www.googleapis.com/youtube/v3/videos?part=snippet,contentDetails&id='+a.playlist_rows[i].videoID+'&key=XXX',
method:'GET',
cache:false,
dataType:'json',
success:function(a) {
callPageSuccess(a);
showIn = "playlist_content_show";
$('button#btn_play').prop('disabled', false);
$('button#btn_play_repeat').prop('disabled', false);
},
error:function() {
showError('danger', 'Erreur XHR détectée. Contactez le staff.');
}
});
}, iTime);
}
Actually, because of setInterval(), this is the last video ID that will be called in each ajax call. How to get ride of this ?

Answer 1

Found out the solution by passing an argument in my anonymous function :
for(var i in a.playlist_rows) {
iTime += 100;
setTimeout(function(videoID) {
$.ajax({
url:'https://www.googleapis.com/youtube/v3/videos?part=snippet,contentDetails&id='+videoID+'&key=AIzaSyAHLt89IGVRiB8aAI4hUFpRFxkxQTHAqZo',
method:'GET',
cache:false,
dataType:'json',
success:function(a) {
callPageSuccess(a);
showIn = "playlist_content_show";
$('button#btn_play').prop('disabled', false);
$('button#btn_play_repeat').prop('disabled', false);
},
error:function() {
showError('danger', 'Erreur XHR détectée. Contactez le staff.');
}
});
}, iTime, a.playlist_rows[i].videoID);
}