Json "for"ループ

Question

＃t1、＃t2、＃t3にビデオに関する情報を入れたいが、すべてが＃t3に置かれる。コードの間違いはどこですか？

$(function(){ 
 
     for (var i = 1; i < 4; i++) { 
 
      var box = "#t" + i; 
 
      var id = "dQw4w9WgXcQ"; 
 
      
 
      var img = "<img src='https://img.youtube.com/vi/" + id + "/default.jpg'>"; 
 
      console.log(i); 
 

 
      $.getJSON('https://www.googleapis.com/youtube/v3/videos?part=statistics&id=' + id + '&key=AIzaSyBlYMwv6QQ9x3r1ACVt1ZeyiRXiaGeKOBU', function(data) { 
 

 
       $(box).prepend("viewCount: " + data.items[ 0 ].statistics.viewCount); 
 

 

 
      }); 
 
      $.getJSON('https://www.googleapis.com/youtube/v3/videos?part=snippet&id=' + id + '&key=AIzaSyBlYMwv6QQ9x3r1ACVt1ZeyiRXiaGeKOBU', function(data) { 
 
       $(box).prepend("<h3>" + "Title" + data.items[0].snippet.title + "</h3>"); 
 
       $(box).prepend("<h3>" + "Channel title" + data.items[0].snippet.channelTitle + "</h3>"); 
 
       $(box).prepend(img); 
 
      }); 
 
     } 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
 
<div id="t1"></div> 
 
<div id="t2"></div> 
 
<div id="t3"></div>

Answer 1

$.getJSON応答を受信したときにハンドラが呼び出される、非同期です。しかし、for-loopは、ハンドラが呼び出されるのを待つことはありません！

はinner-functionを作成し、iの値がinner-functionの永続的であるように、引数としてiの値を渡します。

$(function() { 
 
    for (var i = 1; i < 4; i++) { 
 
    var tobeCalled = function(i) { 
 
     var box = "#t" + i; 
 
     var id = "dQw4w9WgXcQ"; 
 
     var img = "<img src='https://img.youtube.com/vi/" + id + "/default.jpg'>"; 
 
     $.getJSON('https://www.googleapis.com/youtube/v3/videos?part=statistics&id=' + id + '&key=AIzaSyBlYMwv6QQ9x3r1ACVt1ZeyiRXiaGeKOBU', function(data) { 
 
     $(box).prepend("viewCount: " + data.items[0].statistics.viewCount); 
 
     }); 
 
     $.getJSON('https://www.googleapis.com/youtube/v3/videos?part=snippet&id=' + id + '&key=AIzaSyBlYMwv6QQ9x3r1ACVt1ZeyiRXiaGeKOBU', function(data) { 
 
     $(box).prepend("<h3>" + "Title" + data.items[0].snippet.title + "</h3>"); 
 
     $(box).prepend("<h3>" + "Channel title" + data.items[0].snippet.channelTitle + "</h3>"); 
 
     $(box).prepend(img); 
 
     }); 
 
    } 
 
    tobeCalled(i); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
 
<div id="t1"> 
 
    <h2>1</h2> 
 
</div> 
 
<div id="t2"> 
 
    <h2>2</h2> 
 
</div> 
 
<div id="t3"> 
 
    <h2>3</h2> 
 
</div>

Answer 2

Closures...反復ごとに新しいscopeを作成しますクロージャ内のすべてを包みます。

$(function(){  
     for (var i = 1; i < 4; i++) { 
      (function(i) 
      var box = "#t" + i; 
      var id = "dQw4w9WgXcQ"; 

      var img = "<img src='https://img.youtube.com/vi/" + id + "/default.jpg'>"; 
      console.log(i); 

      $.getJSON('https://www.googleapis.com/youtube/v3/videos?part=statistics&id=' + id + '&key=AIzaSyBlYMwv6QQ9x3r1ACVt1ZeyiRXiaGeKOBU', function(data) { 

       $(box).prepend("viewCount: " + data.items[ 0 ].statistics.viewCount); 


      }); 
      $.getJSON('https://www.googleapis.com/youtube/v3/videos?part=snippet&id=' + id + '&key=AIzaSyBlYMwv6QQ9x3r1ACVt1ZeyiRXiaGeKOBU', function(data) { 
       $(box).prepend("<h3>" + "Title" + data.items[0].snippet.title + "</h3>"); 
       $(box).prepend("<h3>" + "Channel title" + data.items[0].snippet.channelTitle + "</h3>"); 
       $(box).prepend(img); 
      }); 
     } 
     })(i); 
    });