forループの後にjavascriptを実行します

Question

私は、非同期ajaxリクエストを使用してページ上にhtmlリストを構築するためにサブサイトのリストからデータを取得するforループを持っていますが、これは生成された後にリストを並べ替えたいアルファベット順にリストを表示します。私は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>"); 
     } 
    }); 
}