$ .getJSON调用内行为不端的for循环($.getJSON calls misbehavin

2019-09-16 16:44发布

这里是我的问题的描述:

我有包含一些的Flickr的photosets ID的数组。 每个ID,我需要两个嵌套APICALLS(一个到Flickr的photosets API,一个photoinfo API),并添加一些HTML到我的网页

结构是:

for(var i=0; i<ARRAY_ID.length; i++){

    $.getJSON(apiCall, function(data) {
         // some processing here

         $.getJSON(apiCall2,function(data){
              //other processing here

每个“apiCall”是包含对的photosets API正确的调用(apiCall),然后为photoInfo API一个字符串(apiCall2)

所有该处理之后,将“apiCall2”块内,我追加一些HTML到一个div(其导致许多块元件作为ARRAY_ID长度)。

还有的地方我有奇怪的行为:所有附加块elems的含有相同的文字和图片和链接。 它打印出来的预期数量,但内容THROU所有的人都一样。 我想它是不等待循环为$ .getJSON完成。 我怎样才能做到这一点? 我需要严格处理下一个之前完成每个JSON请求! 谢谢大家!

Answer 1:

你似乎有2个不同的,但相互关联的问题会在这里。


所有附加块elems的含有相同的文字和图片和链接。 它打印出来的预期数量,但内容THROU所有的人都一样。

如果你引用i在回调中,你需要将内括起来for 。 否则, $.getJSON是异步的, for回调之前将完成被调用, i会一直在循环的最后一个值- ARRAY_ID.length

for(var i = 0; i < ARRAY_ID.length; i++) {
    (function (i) {
        // work with the local `i` rather than the shared `i` from the loop
    })(i);
}

我想它是不等待循环为$ .getJSON完成。 我怎样才能做到这一点? 我需要严格处理下一个之前完成每个JSON请求!

你不能得到for “等待”为每套$.getJSON完成。 你可以,但是,使用for循环和封闭建立一个队列 ,它等待,直到你明确告诉它next继续:

var focus = $(...); // either match an existing element or create one: '<div />'

for(var i = 0; i < ARRAY_ID.length; i++) {
    (function (i) {
        focus.queue('apicalls', function (next) {
            $.getJSON(apiCall, function(data) {
                 // some processing here

                 $.getJSON(apiCall2,function(data){
                      //other processing here

                      next(); // start the next set of api calls
                 });
            });
        });
    })(i);
}

focus.dequeue('apicalls');


Answer 2:

这是封闭的通病。 你的回调继承含有for循环(我会打电话给它的主要功能)功能的情况下的变量。 尝试这个:

for(var i=0; i<ARRAY_ID.length; i++){

    $.getJSON(apiCall, (function(i, v1, v2, etc) { return function(data) {
        // some processing here


        $.getJSON(apiCall2,function(data){
        //other processing here
    })(i, v2, v3, etc));
}

基本上,现在你正在改变从该封闭的访问变量的上下文。 您创建一个匿名函数,并通过你从主函数访问的变量。 在这个例子中,我传递变量i和V1,V2等,表示你可能会访问其他变量。

通过为每个封闭调用正确的情况下,你应该能够解决这个问题。



Answer 3:

最有可能是一个范围的问题。

如果您的回调传递给方法的getJSON使用i的环路的变量,那么他们最有可能使用的最后的值全部结束i

该解决方案将是

function handleJsonRequests(index,id){
 // use index instead of i
 // use id instead of ARRAY_ID[i]

 $.getJSON(apiCall, function(data) {
         // some processing here

         $.getJSON(apiCall2,function(data){
              //other processing here

}// end of function

for(var i=0; i<ARRAY_ID.length; i++){
    handleJsonRequests(i, ARRAY_ID[i]);
}


文章来源: $.getJSON calls misbehaving inside a for loop