如何自動鏈接一系列Ajax請求？

看看我的功能的下半部分：我想重複幾次info(url_part1 + next + url_part2, function(next) {。有沒有比下面介紹的更聰明的方法（可能是某種循環）？我一直在想整天，我什麼都想不出來。如何自動鏈接一系列Ajax請求？

function info(link, callback) { 
     $.getJSON(link, function(json) { 
      $.each(json.data.children, function(i, things) { 
       $("#threadlist").append('<img src="' + things.data.url + '">'); 
      }); 
      callback(json.data.after); 
     }); 
    } 
    var url_first = "http://www.reddit.com/r/aww/.json?jsonp=?"; 
    var url_part1 = "http://www.reddit.com/r/aww/.json?after="; 
    var url_part2 = "&jsonp=?"; 

    info(url_first, function(next) { 
     info(url_part1 + next + url_part2, function(next) { 
      info(url_part1 + next + url_part2, function(next) { 
       info(url_part1 + next + url_part2, function(next) { 
        info(url_part1 + next + url_part2, function(next) { 

        }); 
       }); 
      }); 
     }); 
    });

的js小提琴：http://jsfiddle.net/rdUBD/1/

來源

2012-03-11 metrampaz

這是一個清理的小提琴：http://jsfiddle.net/rdUBD/2/請注意，較慢的電腦可能會遇到加載這些頁面的問題。 – 2012-03-11 21:31:09

@JaredFarrish和更快的電腦不會注意到在同步性上的差異:) – vol7ron 2012-03-11 21:39:13

也許這樣的事情：

http://jsfiddle.net/JwAbK/

來源

2012-03-11 21:41:36

這麼簡單，這麼笨，我自己並沒有碰到它。謝謝。 – metrampaz 2012-03-11 22:11:20

還有一件事 - 做什麼（）;方法？ – metrampaz 2012-03-11 22:15:02

jQury延期對象非常有用和強大：http://api.jquery.com/category/deferred-object/ – 2012-03-12 06:29:50

你可能要考慮遞歸地處理它們。

function processRequest(request) 
{ 
     $.getJSON(request,function(json) { 
      // process json 
      if (json.data.after) { 
      processRequest("http://www.reddit.com/r/aww/.json?after=" 
           + json.data.after 
           + "&jsonp=?"); 
      } 
     }); 
} 

processRequest("http://www.reddit.com/r/aww/.json?jsonp=?");

來源

2012-03-11 21:38:51 tvanfosson

如果我理解正確的話，似乎所有你想要做的是遞歸調用的函數，達到一定的次數。這裏是一個正是這麼做的示例代碼：

function testFunction(number, callback) { 
    document.writeln("testFunction() called with number = " + number + "<br />"); 
    callback(number + 1); 
} 

var CallCount = 0; 
testFunction(1, function(next) { 
    CallCount++; 
    document.writeln("callback called next = " + next + "<br />"); 

    if(CallCount == 5) { 
     document.writeln("callback called 5 times, don't call it again"); 
    } else { 
     testFunction(next, arguments.callee); 
    } 
});

該代碼輸出如下：

testFunction() called with number = 1 
callback called next = 2 
testFunction() called with number = 2 
callback called next = 3 
testFunction() called with number = 3 
callback called next = 4 
testFunction() called with number = 4 
callback called next = 5 
testFunction() called with number = 5 
callback called next = 6 
callback called 5 times, don't call it again

您可以在jFiddle嘗試一下：http://jsfiddle.net/luisperezphd/NQya6/

將此應用於你的代碼中得到：

var DebugCount = 0; 
function EmulateGetJson(link, callback) { 
    DebugCount++; 
    callback({ 
     data: { 
      children: [ 
       { data : { url: "https://www.google.com/images/srpr/logo3w.png?" + DebugCount, next: "next" } } 
      ] 
     } 
    }); 
} 

function info(link, callback) { 
    //$.getJSON(link, function(json) { 
    EmulateGetJson(link, function(json) { 
     $.each(json.data.children, function(i, things) { 
      $("#threadlist").append('<img src="' + things.data.url + '">'); 
     }); 
     callback(json.data.after); 
    }); 
} 

var url_first = "http://www.reddit.com/r/aww/.json?jsonp=?"; 
var url_part1 = "http://www.reddit.com/r/aww/.json?after="; 
var url_part2 = "&jsonp=?"; 

var CallCount = 0; 
var TargetCallCount = 5; 
info(url_first, function(next) { 
    CallCount++; 

    if(CallCount != TargetCallCount) { 
     info(url_part1 + next + url_part2, arguments.callee); 
    } 
});

的的jsfiddle爲此，可以發現：http://jsfiddle.net/luisperezphd/uY8Kj/

我使用JavaScript代碼模擬了$.getJSON的調用，以提供一個完整的示例。我在示例圖像URL的末尾附加了一個數字，以說明每次都返回一個不同的URL。

arguments.callee指的是當前函數，在這種情況下，您傳遞的函數作爲回調函數info()這是遞歸的關鍵。

來源

2012-03-11 22:33:24

如何自動鏈接一系列Ajax請求？

回答

相關問題