javascript - for loop with functions -
this question has answer here:
i have (piece of) website, need grab data tvdb/the moviedb api. need screenshot of episode, use
themoviedb.tvepisodes.getimages({ "id": showid, "season_number": season_number, "episode_number": episode_number }, function(data){}, function(error){}) i need execute 6 times, because need 6 images 6 different episodes.
for(var = 0; < 7; i++){ } but problem is, if ask console.log(i) inside function(data){} part, logs 6, 6 times...
what did wrong?
this full code, variables other functions etc...
for(var = 0; < 6; i++) { if = i; u = + 1 eplen = data.episodes[data.episodes.length - 1 - i] var thies = "<center><span style='font-family: arial'>" + eplen.season_number + 'x' + eplen.episode_number + ": <br>" + eplen.name + "<br>"+ eplen.air_date +"</span></center>"; var thisid = "recent" + u.tostring(); var text = thies; document.getelementbyid(thisid).innerhtml = text; themoviedb.tvepisodes.getimages({"id": showid, "season_number": eplen.season_number, "episode_number": eplen.episode_number}, function(data){ var data = json.parse(data); window.still = data.stills[0].file_path; console.log(window.still); console.log(if); // logs 5 console.log(i); // logs 6 }, function(error){}) //alert(i) //var still = window.still; //console.log(still); //var epstil = "https://image.tmdb.org/t/p/original" + still.stills[0].file_path; //var epstill = "url(" + epstil + ")"; //document.getelementsbyclassname("recent")[i].style.backgroundimage = epstill; } edit
found solution, , since marked duplicate, can't answer anymore, i'll post here:
epstilarray = []; for(var = 0; < 6; i++) { if = i; u = + 1 eplen = data.episodes[data.episodes.length - 1 - i] var thies = "<center><span style='font-family: arial'>" + eplen.season_number + 'x' + eplen.episode_number + ": <br>" + eplen.name + "<br>"+ eplen.air_date +"</span></center>"; var thisid = "recent" + u.tostring(); var text = thies; document.getelementbyid(thisid).innerhtml = text; themoviedb.tvepisodes.getimages({"id": showid, "season_number": eplen.season_number, "episode_number": eplen.episode_number}, function(data){ var data = json.parse(data); still = data.stills[0].file_path; var epstil = "https://image.tmdb.org/t/p/original" + still; var epstil = "url(" + epstil + ")"; epstilarray.push(epstil); console.log(epstilarray); document.getelementsbyclassname("recent")[epstilarray.length - 1].style.backgroundimage = epstil; }, function(error){}) }
this great example of spot can use javascript closure ensure each instance of inline function has access different value i.
one way wrap code in immediately-invoked function expression (iife), , capture copy of desired variable inside different variable tied scope of function expression. done in format of (function(){ var icopy = i; /*your code here*/})(); or (function(icopy){ /*your code here*/})(i);
setting copied variable in own line within iife:
for(var = 0; < 6; i++) { ... (function(){ var icopy = i; // copied icopy themoviedb.tvepisodes.getimages({}, function(data){ ... console.log(icopy); }, function(error){}); })(); // iife has own scope capturing copy of variable } alternatively, passing variable parameter iife:
for(var = 0; < 6; i++) { ... (function(icopy){ // copied icopy themoviedb.tvepisodes.getimages({}, function(data){ ... console.log(icopy); }, function(error){}); })(i); // iife has own scope capturing copy of variable parameter } also note don't have change copied variable's name; did in above example sake of clarity. if 2 variables in different scopes share same name, code reference more immediate (innermost) scope. hence, following code work:
for(var = 0; < 6; i++) { ... (function(i){ // copied themoviedb.tvepisodes.getimages({}, function(data){ ... console.log(i); }, function(error){}); })(i); // iife has own scope capturing copy of variable parameter }
Comments
Post a Comment