的JavaScript與異步功能

Question

就上線循環中，getElementsByClassName找不到元素，因爲loadhtml功能是一個AJAX調用。

如何使用異步函數或ES6發電機或承諾，爲了使getElementsByClassName最後一行的工作？

TotalArticleNumber = 3; 

    for (let i = TotalArticleNumber; i > 0; i--) { 
     loadhtml('./article/test' + i + '.md', function(e) { 
     sdf(i, e); 
     }); 
    }; 


    function loadhtml(url,callback) { 
    var xhttp = new XMLHttpRequest(); 
     xhttp.onreadystatechange = function() { 
     if (xhttp.readyState == 4) { 
     if(xhttp.status == 200){ 
     var response = xhttp.responseText; 
     (callback)(response); 
     } 
     }; 
    }; 

     xhttp.open("GET", url, true); 
     xhttp.send(); 
    }; 



    function sdf(i, e) { 
     var node = document.createElement("DIV"); 
     var node1 = document.createElement("A"); 
     var node2 = document.createElement("H1"); 
     var node3 = document.createElement("P"); 

     node.setAttribute('class', 'articleInner'); 
     node1.setAttribute('class', 'openArticle'); 
     node2.setAttribute('class', 'title'); 
     node2.setAttribute('id', i); 
     node2.innerHTML = e.match(re); 
     node3.innerHTML = converter.makeHtml(e.replace(re1, "")); 
     node1.appendChild(node2); 
     node1.appendChild(node3); 
     node.appendChild(node1); 

     document.getElementById('articleContent').appendChild(node); 
    } 

    Array.prototype.forEach.call(document.getElementsByClassName('title'), function(item) { 
     item.addEventListener('click', function() { 
     document.getElementById('realArticle').style.display = 'block'; 
     document.body.style.background = 'gray'; 
     }) 
    }) 

Answer 1

如果你想使這個使用async功能，你需要用這個核心在async function塊，並使用await關鍵字每個答應你使用：

假設loadHtml是一個異步函數，你可以使用這個：

function loadHTML(url) { 
    return new Promise((resolve, reject) => { 
     var xhttp = new XMLHttpRequest(); 
     xhttp.onreadystatechange = function() { 
      if (xhttp.readyState == 4) { 
       var response = xhttp.responseText; 
       if (xhttp.status == 200) { 
        resolve(response); 
       } else { 
        reject(response) 
       } 
      }; 
     }; 
     xhttp.open("GET", url, true); 
     xhttp.send(); 
    }) 
}; 
async function loadHtmlAndMakeElements(){ 
    TotalArticleNumber = 3; 
    let promises = [] 
    for (let i = TotalArticleNumber; i > 0; i--) { 
     promises.push(new Promise((resolve, reject) => { 
      loadHTML(`./article/test${i}.md`).then(e => { 
       sdf(i, e); 
       resolve() 
      }); 
     })) 
    } 
    await Promise.all(promises); 
    Array.prototype.forEach.call(document.getElementsByClassName('title'), function(item) { 
     item.addEventListener('click', function() { 
      document.getElementById('realArticle').style.display = 'block'; 
      document.body.style.background = 'gray'; 
     }) 
    }) 
} 
function sdf(i, e) { 
    var node = document.createElement("DIV"); 
    var node1 = document.createElement("A"); 
    var node2 = document.createElement("H1"); 
    var node3 = document.createElement("P"); 
    node.setAttribute('class', 'articleInner'); 
    node1.setAttribute('class', 'openArticle'); 
    node2.setAttribute('class', 'title'); 
    node2.setAttribute('id', i); 
    node2.innerHTML = e.match(re); 
    node3.innerHTML = converter.makeHtml(e.replace(re1, "")); 
    node1.appendChild(node2); 
    node1.appendChild(node3); 
    node.appendChild(node1); 
    document.getElementById('articleContent').appendChild(node); 
} 
loadHtmlAndMakeElements()