为什么jquery GET在这个循环中只发送一个值?

时间:2012-03-19 15:27:37

标签: javascript jquery youtube-api

下面的函数应该为每个查询抓取视频并构建一些取决于i

的html
function getVideos() {

    var text = "";
    for(var i=0; i<queryArray.length; i++){
        var queryUrl = "http://gdata.youtube.com/feeds/api/videos?q="+queryArray[i]+
              "&max-results=1&orderby=relevance&v=2&alt=json&format=5";

     $.get(queryUrl, function(data){ 
    constructHtml(data, i);
    }, 'json');

    }

}

然而每当i被称为2时,它就会$.get作为querryArray传递给constructHtml? 注意:"2"中有两个值,因此{{1}}在技术上超出范围。

5 个答案:

答案 0 :(得分:1)

由于$.get()的默认异步性质,你的for循环继续执行,你的i变量被重新分配。

解决此问题的快捷方法是在async: false上设置$.get()这将基本上阻止您的for循环继续执行,直到$.get()完成意味着您的i价值在这个过程中不会改变。

必须强调的是,这将阻止在for循环完成之前在页面上执行的所有脚本,这可能会使用户长时间无法完成其他操作。

答案 1 :(得分:0)

因为在调用回调方法时,for循环已完成执行并且i被设置为数组中的最高索引+ 1.值为2(即使只有2项)因为i++执行的次数比阵列中的项目多1次。

答案 2 :(得分:0)

试试这个:

function(index) {
    $.get(queryUrl, function(data){ 
    constructHtml(data, index);
    }, 'json');
}(i);

您的代码无法工作的原因是因为回调在循环完成时执行。因此,您可以启动两个或更多AJAX操作,但是当它们完成时,“i”现在是循环的结束。

答案 3 :(得分:0)

这是可变的吊装;变量总是被提升到函数范围,即使在块中定义它们也是如此。

您定义的内联函数是'结束'对i的引用,因此在调用constructHtml时,它是最后一个值。尝试将其定义为更高范围的函数,并传递参数。

一些阅读:

http://oreilly.com/javascript/excerpts/javascript-good-parts/awful-parts.html

答案 4 :(得分:0)

那是因为AJAX调用是异步的,所以当成功回调运行时,循环结束,i的值就是你在循环结束时得到的值。

使用闭包为每次迭代保留i的值:

function getVideos() {
  var text = "";
  for(var i=0; i<queryArray.length; i++){

    (function(index){

      var queryUrl = "http://gdata.youtube.com/feeds/api/videos?q="+queryArray[index]+
          "&max-results=1&orderby=relevance&v=2&alt=json&format=5";
      $.get(queryUrl, function(data){ 
        constructHtml(data, index);
      }, 'json');

    })(i);

  }
}

这是一个使用计时器显示异步回调保留变量值的演示:http://jsfiddle.net/Guffa/WgxPC/