Question

下面的函数应该为每个查询抓取视频并构建一些取决于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}}在技术上超出范围。

Answer 1

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

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

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

Answer 2

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

Answer 3

试试这个：

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

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

Answer 4

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

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

一些阅读：

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

Answer 5

那是因为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/

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

5 个答案: