Question

我有一些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？或者，对于我正在尝试做的事情，它总体上不是一个好的解决方案吗？

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');
  });
})();

多个XMLHttpRequests之后的Javascript调用函数

1 个答案: