javascript - 在另一个函数完成 JavaScript 和 JQuery 后运行函数

Question

我需要一点帮助。我正在尝试运行我的第二个函数“likeLinks();”但只有在我的第一个函数“getLikeURLs();”之后完成了。这是因为我的第二个函数依赖于 links 数组来执行。看起来他们正在同时尝试逃跑。

如有任何帮助，我们将不胜感激。

    var links = [];
    var url = '/' + window.location.pathname.split('/')[1] + '/' + window.location.pathname.split('/')[2] + '/'
    getLikeURLs();
    likeLinks();

    function getLikeURLs() {
        for (i = 1; i < parseInt(document.getElementsByClassName('PageNav')[0].getAttribute('data-last')) + 2; i++) {
            var link = $.get(url + 'page-' + i, function(data) {
                //gets the like links from current page
                $(data).find('a[class="LikeLink item control like"]').each(function() {
                    links.push($(this).attr('href')); // Puts the links in the Array
                });
            });
        }
    }

    function likeLinks() {
        for (t = 0; t <= links.length; t++) {
            var token = document.getElementsByName('_xfToken')[0].getAttribute('value')
            $.post(links[t], {
                _xfToken: token,
                _xfNoRedirect: 1,
                _xfResponseType: 'json'
            }, function(data) {});
        }
    }

Answer 1

link 变量实际上是 jQuery deferred objects - 将它们存储在一个数组中，然后您可以使用 $.when() 创建一个新的延迟对象，该对象仅在所有先前的 $.get() 操作完成后才解析已完成:

function getLikeURLs(url) {     // NB: parameter, not global
    var defs = [], links = [];  // NB: links no longer global

    for (...) {
        var link = $.get(...);
        defs.push(link);
    }

    // wait for previous `$.get` to finish, and when they have create a new
    // deferred object that will return the entire array of links
    return $.when.apply($, defs).then(function() { return links; });
}

然后，启动函数链:

getLikeURLs(url).then(likeLinks);

请注意，现在将向 likeLinks 传递链接数组，而不是从全局状态访问它。该函数还应该重写，以允许您等待其 $.post 调用完成:

function likeLinks(links) {
    // loop invariant - take it outside the loop
    var token = document.getElementsByName('_xfToken')[0].getAttribute('value');

    // create array of deferreds, one for each link
    var defs = links.map(function(link) {
        return $.post(link, {
            _xfToken: token,
            _xfNoRedirect: 1,
            _xfResponseType: 'json'
        });
    });

    // and another for when they're all done
    return $.when.apply($, defs);
}

附:不要将(相对)昂贵的 parseInt(document.getAttribute(...)) 表达式放在 for 语句中 - 它会导致每次迭代都对其进行评估。在循环外计算一次并将其存储在变量中。还有一些其他地方您会不必要地重复调用，例如window.location.pathname.split()