用普通javascript链接承诺

Im学习承诺，所以我制作了一个简单的网站，通过ajax生成内容

当用户点击链接时，它会改变网站的内容，但首先它会淡出原来的内容

我制作了一个脚本，可以调用承诺并返回内容

function getcontent(url){
return new Promise(function(resolve,reject){

     var xhttp = new XMLHttpRequest();
      xhttp.open("GET", url, true);
      xhttp.onload=function(){
        if(xhttp.status==200){
            resolve(xhttp.response)
        }
        else{
            reject(Error(xhttp.responseText))
        }
      }
      xhttp.send();
    })
    }

以及应该添加内容的函数

function change(url){
    var doc=document.getElementsByClassName("info")[0];
    return getcontent(url).then(function(x){

        doc.children[0].classList.add("remove");
        return x
    }).then(function(x){
        doc.removeChild(doc.children[doc.children.length-1]);
        var div=document.createElement("div");
        div.innerHTML=x;
        doc.appendChild(div)
    })
}

更清楚地说，将添加类的元素

-webkit-transition:15s ease all;

所以我想，让原始内容淡出，然后将ajax内容添加到站点。这就是我使用承诺的原因。我认为承诺链等待.then（）方法完成，然后执行下一个.then（）方法。但是ajax内容是在原始内容消失之前添加到站点的，因此它首先调用before.then（）方法。我错过什么了吗

我尝试在两个单独的函数中使用ontransitionend事件作为注释suggets来完成它，但它就是不起作用

function getcontent(url){
return new Promise(function(resolve,reject){
  var xhttp = new XMLHttpRequest();
  xhttp.open("GET", url, true);
  xhttp.onload=function(){
    if(xhttp.status==200){
        resolve(xhttp.response)
    }
    else{
        reject(Error(xhttp.responseText))
    }
  }
  xhttp.send();
})
}

function change(url){
    var doc=document.getElementsByClassName("info")[0];
     getcontent(url).then(function(x){
     return new Promise(function(res,rej){
    doc.addEventListener("transitionend",function(){
      res(x);
    })});
    doc.children[0].classList.add("remove")

    })
}

---

然后依次调用每个回调，当在前一个回调中返回新的承诺时，承诺将等待。代码的问题在于承诺不会等待css动画。由于它不等待，它将转到下一个回调并立即删除您的元素

您可以在第一个

中创建（并返回）一个新的承诺，然后在
中创建（并返回）一个新的承诺，对于该承诺，请使用解决/拒绝该新承诺。这将使承诺等待转换完成，然后执行下一个回调


var prom=新承诺（函数（res，rej）{
var xhttp=newXMLHttpRequest（）；
xhttp.open（“GET”https://cors-test.appspot.com/test“，对）；
xhttp.onload=函数（）{
控制台日志（“已加载”）；
如果（xhttp.status==200）{
res（xhttp.响应）
}
否则{
rej（错误（xhttp.responseText））
}
}
xhttp.send（）；
});
prom.then（功能（数据）{
var old=document.querySelector（“内容”）；
返回新承诺（功能（res、rej）{
old.addEventListener（“transitionend”，function（））{
res（数据）；
});
old.classList.add（“remove”）；
});
}).then（功能（数据）{
var parent=document.querySelector（“#parent”）；
var old=document.querySelector（“内容”）；
旧的。删除（）；
var div=document.createElement（“div”）；
div.innerHTML=“检索到的数据，长度：”+Data.length；
父、子（div）；
});
。删除{
不透明度：0；
}
#上级部门{
-o-过渡：所有2s；
-moz转换：所有2s；
-webkit转换：所有2；
过渡：所有2；
}
Content
我试图将它分成两个独立的函数，但它不起作用。我用我厌倦的代码更新了我的问题now@trolkura，因为您删除了错误部分中的类，所以将
.add（'remove'）
调用放在addEventListener调用之后，就像我的代码示例中那样