如何在一個回調函數執行後才調用一段代碼？

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

您可以使用回調或承諾，

回調例如：

function loadDoc(cb) { 

    var xhttp = new XMLHttpRequest(); 

    xhttp.onreadystatechange = function() { 

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

} 

loadDoc(function(res) { 
    console.log(res); 
    // do something 
}); 

承諾例如：

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

    xhttp.onreadystatechange = function() { 

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

} 

loadDoc() 
.then(function(res) { 
    console.log(res); 
    // do something 
}) 
.catch(function(err) { 
    console.error(err); 
    // do something 
}); 

Answer 2

如果使用promises你就可以使用Promise.all([promises]) 。

「Promisifying」 當前的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(); 
    }); 
}