链接承诺平原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（）方法来完成，然后执行next.then（）方法。但是，在原始内容消失之前，ajax内容会被添加到网站中，因此在第一个.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") 

    }) 
} 

Answer 1

每个然后调用回调函数的顺序，并返回一个新的承诺时，承诺将等待在之前的回调中。您的代码存在的问题是，承诺不会等待css动画。而且由于它不会等待它进入下一个回调并立即删除您的元素。

您可以在第一个then中创建（并返回）一个新的承诺，并为该承诺使用transitionend event listener来解决/拒绝新的承诺。这将使承诺等到过渡完成，然后执行下一个回调

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>