用纯JavaScript链接许诺

Question

我学习有希望，所以我做了一个简单的网站，可以通过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内容是在原始内容消失之前添加到站点的，因此在first .then（）方法完成之前会对其进行调用。 我错过了什么？

我试图使用ontransitionend事件作为注释建议在两个单独的函数中执行此操作，但它无法正常工作

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")

    })
}

Answer 1

然后按顺序调用每个随后的回调，并且在先前的回调中返回新的诺言时，诺言将等待。 您的代码的问题在于，promise不会等待CSS动画。 并且由于它不等待，因此转到下一个回调并立即删除您的元素。

您可以在then中的第一个中创建（并返回）新的Promise，为此Promise使用Transitionend事件侦听器解析/拒绝该新Promise。 这将使Promise等到转换完成后再执行下一个回调

 var prom = new Promise(function(res,rej){ var xhttp = new XMLHttpRequest(); xhttp.open("GET", "https://cors-test.appspot.com/test", true); xhttp.onload=function(){ console.log("loaded"); if(xhttp.status==200){ res(xhttp.response) } else{ rej(Error(xhttp.responseText)) } } xhttp.send(); }); prom.then(function(data){ var old = document.querySelector("#content"); return new Promise(function(res,rej){ old.addEventListener("transitionend",function(){ res(data); }); old.classList.add("remove"); }); }).then(function(data){ var parent = document.querySelector("#parent"); var old = document.querySelector("#content"); old.remove(); var div=document.createElement("div"); div.innerHTML="Data retrieved, length: "+data.length; parent.appendChild(div); }); 

 .remove { opacity:0; } #parent div { -o-transition:all 2s; -moz-transition:all 2s; -webkit-transition:all 2s; transition:all 2s; } 

 <div id="parent"><div id="content">Content</div></div>