javascript - 在 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() 调用返回的 promise 数组。然后您可以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>");
        }
    });
}