javascript - 如何在回调函数执行后才调用一段代码？

Question

考虑这段代码，就像一个玩具示例:

function loadDoc() {

    var xhttp = new XMLHttpRequest();

    xhttp.onreadystatechange = function() {

        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("demo").innerHTML = this.responseText;
        }
    };
    xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
    xhttp.send();
}

让我们考虑在函数 loadDoc() 中有五种异步调用。我现在要做的是在执行完所有五个回调函数时调用另一个函数或任何一段代码。 Javascript 是否提供了任何方法来帮助解决这种情况，或者我们需要设置一个标志来检查是否所有 5 个任务都已执行？

Answer 1

如果您使用 promises你将能够使用 Promise.all([promises])。

“ promise ”您当前的 ajax 请求:

function loadDoc() {
    req().then(function (responseText) {
        document.getElementById("demo").innerHTML = responseText;
    })

}

function req () {
    return new Promise(function (resolve, reject) {
        var xhttp = new XMLHttpRequest();

        xhttp.onreadystatechange = function() {

            if (this.readyState == 4 && this.status == 200) {
                resolve(this.responseText);
            } else {
                reject();
            }
        };
        xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
        xhttp.send();
    });
}