多个 XMLHttpRequest 后的 Javascript 调用函数

Question

我用新的 html 替换了一些 div。到目前为止，一切都很好。

(function() { 

  var obj = function(div) {     

    var obj = {};
    obj.divToReplace = div;
    obj.objId = obj.divToReplace.dataset.id;

    obj.template = "<div class="newDivs"><p>@Name</p><img src='@ImageUrl'/></div>";

    obj.replaceDiv = function() {
        var xhr = new XMLHttpRequest();
        xhr.open( 'GET', encodeURI('http://.../' + obj.objId) );
        xhr.onload = function(e) {
            if (xhr.status === 200) {
                var x = JSON.parse(xhr.responseText).data.attributes;

                var newHtml = obj.template
                            .replaceAll("@Name", x.name)
                            .replaceAll("@ImageUrl", x.imageUrl);

                obj.divToReplace.outerHTML = newHtml;
            }
            else {
                console.log(xhr.status);
            }
        };
        xhr.send();

    };

    return {
        replaceDiv: obj.replaceDiv
    }

};

String.prototype.replaceAll = function(search, replace)
{
    return this.replace(new RegExp(search, 'g'), replace);
};

//get the elements I want to replace
var elems = document.getElementsByClassName('divToReplace');

//replace them
for (i = 0; i < elems.length; i++) { 
    obj(elems[i]).replaceDiv();
}

//call handleStuff ?


})();

然后我想将 addEventListener 添加到 div，但在这里我陷入了困境。我想在替换所有 div 后调用handleStuff()。 (当然，因为在我替换它们之前，新的 div 并不存在。)而且我无法使用 jQuery。

 var handleStuff = function(){

   var classname = document.getElementsByClassName("newDivs");

   var myFunction = function() {

   };

   for (var i = 0; i < classname.length; i++) {
       classname[i].addEventListener('click', myFunction, false);
   }
   ...............

如何添加一个回调来告诉我何时替换所有 div？或者对于我想要做的事情来说，它总体上不是一个好的解决方案？

Answer 1

抱歉之前使用了 jQuery，这里是使用原生 Promise 的解决方案(已测试)

(function() {

  var f = {
    send : function(){
        var promise = new Promise(function(resolve, reject){
            var xhr = new XMLHttpRequest();
            xhr.open( 'GET', encodeURI('http://www.google.com/') );
            xhr.onload = function(e) {
                if (xhr.status === 200) {
                    //your code
                    resolve();
                    console.log('resolve');
                } else {
                    console.log(xhr.status);
                }
            };
            xhr.send();
        });
        return promise;
    }
  }

  var promises = [];
  for (i = 0; i < 100; i++) { 
      promises.push(f.send());
  }

  Promise.all(promises).then(function(){
      console.log('success');
  });
})();