在多个 XMLHttpRequest 之后调用 Javascript 函数

Javascript call function after multiple XMLHttpRequests

本文关键字：调用 Javascript 函数 之后 XMLHttpRequest      更新时间：2023-09-26

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

(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？还是总体上不是我想要做的好解决方案？

很抱歉之前使用 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');
  });
})();
相关文章：