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