在for循環後執行javascript

Question

我有一個for循環從子列表中的列表中獲取數據以使用異步ajax請求在頁面上構建html列表，但此工作正常，但我希望在列表生成後按字母順序顯示列表。我正在用JavaScript學習曲線，所以任何幫助表示讚賞。 onWebsLoaded函數完成後，我需要運行sortProjects函數。

function onWebsLoaded(sender, args) { 
    for (var i = 0; i < this.webs.get_count(); i++) 
    { 
     client = ""; 
     var title = this.webs.itemAt(i).get_title(); 
     var desc = this.webs.itemAt(i).get_description(); 
     var url = this.webs.itemAt(i).get_serverRelativeUrl(); 
     id = (title).replace(/\ /g, ""); 
     getProjectProperties(url, title, desc, client, id); 
    } 
} 
function sortProjects() { 
    tinysort('ul#projectstable>li'); 
} 
function getProjectProperties (url, title, desc, client, id) { 
    $.ajax({ 
     url: url + "/_api/web/lists/getbytitle('Project Properties')/items('1')", 
     method: "GET", 
     headers: { "Accept": "application/json; odata=verbose" }, 
     success: function (data) { 
        client = data.d.Title; 
        $('#projectstable').append("<li id='" + id + "' class='ms-ListItem'><a href='" + url + "'><span id='" + id + "Client' class='ms-ListItem-primaryText'>" + title + "</span><span class='ms-ListItem-secondaryText'>" + client + "</span><span class='ms-ListItem-tertiaryText'>" + desc + "</span></a></li>"); 
     }, 
     error: function() { 
        $('#projectstable').append("<li id='" + id + "' class='ms-ListItem'><a href='" + url + "'><span id='" + id + "Client' class='ms-ListItem-primaryText'>" + title + "</span><span class='ms-ListItem-secondaryText'>" + client + "</span><span class='ms-ListItem-tertiaryText'>" + desc + "</span></a></li>"); 
     } 
    }); 
} 

Answer 1

，讓你存儲從$.ajax()調用返回的承諾的數組你可以修改你的邏輯。然後您可以將apply()排列爲$.when並致電sortProjects()。試試這個：

function onWebsLoaded(sender, args) { 
    var requests = []; 
    for (var i = 0; i < this.webs.get_count(); i++) { 
     client = ""; 
     var title = this.webs.itemAt(i).get_title(); 
     var desc = this.webs.itemAt(i).get_description(); 
     var url = this.webs.itemAt(i).get_serverRelativeUrl(); 
     id = (title).replace(/\ /g, ""); 
     requests.push(getProjectProperties(url, title, desc, client, id)); 
    } 
    $.when.apply($, requests).done(sortProjects); 
} 

function sortProjects() { 
    tinysort('ul#projectstable>li'); 
} 

function getProjectProperties (url, title, desc, client, id) { 
    // note 'return' below 
    return $.ajax({ 
     url: url + "/_api/web/lists/getbytitle('Project Properties')/items('1')", 
     method: "GET", 
     headers: { "Accept": "application/json; odata=verbose" }, 
     success: function (data) { 
      client = data.d.Title; 
      $('#projectstable').append("<li id='" + id + "' class='ms-ListItem'><a href='" + url + "'><span id='" + id + "Client' class='ms-ListItem-primaryText'>" + title + "</span><span class='ms-ListItem-secondaryText'>" + client + "</span><span class='ms-ListItem-tertiaryText'>" + desc + "</span></a></li>"); 
     }, 
     error: function() { 
      $('#projectstable').append("<li id='" + id + "' class='ms-ListItem'><a href='" + url + "'><span id='" + id + "Client' class='ms-ListItem-primaryText'>" + title + "</span><span class='ms-ListItem-secondaryText'>" + client + "</span><span class='ms-ListItem-tertiaryText'>" + desc + "</span></a></li>"); 
     } 
    }); 
}