jQuery。當不在代碼塊外工作時

Question

我目前正在使用Beaker Browser API，我需要向另一個用戶的網站發出幾個（至少20個）ajax請求，以獲取他們發布的內容。

我有以下數組：

var posts = []; // Where the data of the ajax is stored
var ajax_requests = []; // Where the ajax requests are stored
var following = []; // Where the urls for all requests are

以下邏輯循環遍歷所有鏈接

// Get posts from all the people you follow
for(var i = 0; i < following.length; i++) {

    // Get the person's url and folders
    let person = new DatArchive(following[i]);

    // Read the directory containing all the posts
    person.readdir("/posts").then(files => {

        // For each post
        for(var j = 0; j < files.length; j++) {
            // Request the JSON object representing that post and add it to the array
            ajax_requests.push(get_posts(person.url + "/posts/" + files[j]));
        }
    });
}

get_posts（）函數和.when：

function get_posts(url) {
    return $.ajax({
        type: "GET",
        dataType: "json",
        url: url,
        success: function(data) {
            console.log("Adding to posts");
            posts.push(data);
        }
    });
}    



$.when.apply($, ajax_requests).then(function() {
    console.log(posts.length);
});

我想了解的是為什么$.when不等待ajax完成。 我以為那是應該做的，而是返回空數組。 那就是一個，另一個就是為什么如果我將它移動到person.readdir("/posts")塊中，它會起作用的原因。

我不能僅僅把它留在那里，因為我想進入的邏輯只需要對posts數組進行排序並只顯示其中的一部分，我不認為那應該是一次頁面加載就可以運行的東西。

Answer 1

您可以在調用$.when.apply()之前檢查ajax_requests array .length是否等於following.length乘files.length

 var following = [1, 2, 3]; var ajax_requests = []; function get_posts(url) { return $.Deferred(dfd => setTimeout(dfd.resolve, Math.floor(Math.random() * 1000), url)); } for (var i = 0; i < following.length; i++) { // Get the person's url and folders let person = new $.Deferred(dfd => setTimeout(dfd.resolve, Math.floor(Math.random() * 1000) , Array(3).fill(following[i])) ); // Read the directory containing all the posts person.then(files => { // For each post for (var j = 0; j < files.length; j++) { // Request the JSON object representing that post and add it to the array ajax_requests.push(get_posts("/posts/" + files[j])); if (ajax_requests.length === following.length * files.length) { $.when.apply($, ajax_requests).then(function(...data) { console.log(data); }); } } }) } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> 

Answer 2

您可以使用$.map()和$.when.apply()模式兩次來等待內部循環的所有結果

 let following = [1, 2, 3]; function get_posts(url) { return new $.Deferred(dfd => setTimeout(dfd.resolve, Math.floor(Math.random() * 1000), url)); } $.when.apply($ , $.map(following, (follower) => { let person = new $.Deferred(dfd => setTimeout(dfd.resolve, Math.floor(Math.random() * 1000) , Array(3).fill(follower)) ); return person .then(files => $.when.apply($ , $.map(files, (file) => get_posts("/posts/" + file))) ) })) .then(function(...data) { console.log(data); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script>