1. ホーム
  2. 質問と答え
  3. Javascript：Promise（）.then doesnt work

Javascript：Promise（）.then doesnt work

2016-09-24 11 views
2

私のウェブサイトのローダーアニメーションスタイルを作成しようとしています。読み込みアニメーションは16の棒で、順番に増減します。たとえば、最初のバーは元のサイズに戻ります。次に、次のバーは、すべてのバーが完了するまでこのプロセスを繰り返してから、プロセスを停止してページを表示します。この場合、JavaScriptは呼び出し関数では非同期であるため、私はそれを回避するという約束をしました。プロミスの使用は、前のアニメートが完了した後でバーをアニメートすることです。現在のところ、私のコードは最初のバーだけをアニメーション化し、そこで停止します。残りの部分をアニメーション化し続けることはありません。以下はすべて私のコードです：Javascript：Promise（）.then doesnt work

重要！ JavaScriptが問題になります。 HTMLやCSSに時間を費やさないでください。

var index = -1; 
 

 
function loading(){ 
 
\t var loader = document.getElementById("loader"); 
 
\t display = window.getComputedStyle(loader).display; 
 
\t if (display == "block"){ 
 
\t \t var child = document.getElementById("loader-ul").getElementsByTagName("div"); 
 
\t \t index = index + 1; 
 
\t \t alert("dd"); 
 
\t \t animate(child); 
 
\t } 
 
} 
 

 
function animate(element){ 
 
\t var el = element[index]; 
 
\t var MaxHeight = false; 
 
\t var finished = false; 
 
\t function anim(){ 
 
\t \t return new Promise(function(resolve, reject){ 
 
\t \t \t if (finished == false){ 
 
\t \t \t \t if (MaxHeight == false){ 
 
\t \t \t \t \t var height = parseInt(window.getComputedStyle(el).height.slice(0, -2)); 
 
\t \t \t \t \t var Bot = parseFloat(window.getComputedStyle(el).bottom.slice(0, -2)); 
 
\t \t \t \t \t height = height + 1; 
 
\t \t \t \t \t Bot = Bot + 0.5; 
 
\t \t \t \t \t el.style.bottom = Bot + "px"; 
 
\t \t \t \t \t el.style.height = height + "px"; 
 
\t \t \t \t \t if (height <= 100){ 
 
\t \t \t \t \t \t window.requestAnimationFrame(anim); 
 
\t \t \t \t \t } 
 
\t \t \t \t \t else{ 
 
\t \t \t \t \t \t MaxHeight = true; 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t \t if (MaxHeight == true){ 
 
\t \t \t \t \t var height = parseInt(window.getComputedStyle(el).height.slice(0, -2)); 
 
\t \t \t \t \t var Bot = parseFloat(window.getComputedStyle(el).bottom.slice(0, -2)); 
 
\t \t \t \t \t height = height - 1; 
 
\t \t \t \t \t Bot = Bot - 0.5; 
 
\t \t \t \t \t el.style.bottom = Bot + "px"; 
 
\t \t \t \t \t el.style.height = height + "px"; 
 
\t \t \t \t \t if (height >= 50){ 
 
\t \t \t \t \t \t window.requestAnimationFrame(anim); 
 
\t \t \t \t \t } 
 
\t \t \t \t \t else{ 
 
\t \t \t \t \t \t MaxHeight = true; 
 
\t \t \t \t \t \t finished = true; 
 
\t \t \t \t \t \t el.style.bottom = 0 + "px"; 
 
\t \t \t \t \t \t el.style.height = 50 + "px"; 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t \t else{ 
 
\t \t \t \t resolve(); 
 
\t \t \t } 
 
\t \t }); 
 
\t } 
 
\t anim().then(loading); 
 
}
body{ 
 
\t margin: 0px; 
 
\t padding: 0px; 
 
\t margin: auto; 
 
} 
 

 
#loader{ 
 
\t display: block; 
 
\t position: fixed; 
 
\t height: 100%; 
 
\t width: 100%; 
 
\t background-color: white; 
 
\t z-index: 9999; 
 
} 
 

 
#loader .center{ 
 
\t position: relative; 
 
\t height: 50px; 
 
\t width: 200px; 
 
\t background-color: red; 
 
\t top: 50%; 
 
\t transform: translateY(-50%); 
 
\t margin: auto; 
 
} 
 

 
#loader .center div{ 
 
\t width: 2px; 
 
\t height: 50px; 
 
\t background-color: blue; 
 
\t float: left; 
 
\t padding: 0px; 
 
\t margin-right: 5px; 
 
\t margin-bottom: 25px; 
 
\t position: relative; 
 
}
<body onload="loading()"> 
 
    <div id="loader"> 
 
\t \t \t <div class="center" id="loader-ul"> 
 
\t \t \t \t <div></div> 
 
\t \t \t \t <div></div> 
 
\t \t \t \t <div></div> 
 
\t \t \t \t <div></div> 
 
\t \t \t \t <div></div> 
 
\t \t \t \t <div></div> 
 
\t \t \t \t <div></div> 
 
\t \t \t \t <div></div> 
 
\t \t \t \t <div></div> 
 
\t \t \t \t <div></div> 
 
\t \t \t \t <div></div> 
 
\t \t \t \t <div></div> 
 
\t \t \t \t <div></div> 
 
\t \t \t \t <div></div> 
 
\t \t \t \t <div></div> 
 
\t \t \t \t <div></div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </body>

私もjsfiddleへのリンクを持っている：

https://jsfiddle.net/6227jjen/

はあなたのすべてをありがとう！

注： デバッグ用にいくつかの警告を追加しました。

出典

2016-09-24 GeorGios

+3

それが問題とクラッタあなたの質問とは無関係です、あなたのHTMLやCSSを削除してください。 –

+0

私は同意しますが、私はsnippedを実行するためだけに追加しました。 – GeorGios

+1

あなたのフィドルに問題があります - コンソールが表示されます：読み込みが定義されていません。 JSオプションでをラップする必要はありません。 –

答えて

1

問題は、すべてのパスが解決するとは限りません。より大きな問題は、コードが1つではなく約束をたくさん作成することです。変更の概要を以下に示します。

function anim() { 
    return new Promise (function (resolve) { 
    function _anim() { 
     if (!finished) { 
      _logic(); 
      // By putting requestAnimationFrame at the end, you can ensure 
      // that it will be called after your logic 
      // (assuming finished eventually equals true). 
      window.requestAnimationFrame(_anim); 
     } 
    else 
     resolve(); 
    } 
    });

ここに実際の修正があります。

var index = -1; 
 

 
function loading() { 
 
    var loader = document.getElementById("loader"); 
 
    display = window.getComputedStyle(loader).display; 
 
    if (display == "block") { 
 
    var child = document.getElementById("loader-ul").getElementsByTagName("div"); 
 
    index = index + 1; 
 
    alert("dd"); 
 
    animate(child); 
 
    } 
 
} 
 

 
function animate(element) { 
 
    var el = element[index]; 
 
    var MaxHeight = false; 
 
    var finished = false; 
 

 
    function anim() { 
 
    return new Promise(function(resolve, reject) { 
 
     function _anim() { 
 
     if (finished == false) { 
 
      if (MaxHeight == false) { 
 
      var height = parseInt(window.getComputedStyle(el).height.slice(0, -2)); 
 
      var Bot = parseFloat(window.getComputedStyle(el).bottom.slice(0, -2)); 
 
      height = height + 1; 
 
      Bot = Bot + 0.5; 
 
      el.style.bottom = Bot + "px"; 
 
      el.style.height = height + "px"; 
 
      if (height > 100) { 
 
       MaxHeight = true; 
 
      } 
 
      } 
 
      if (MaxHeight == true) { 
 
      var height = parseInt(window.getComputedStyle(el).height.slice(0, -2)); 
 
      var Bot = parseFloat(window.getComputedStyle(el).bottom.slice(0, -2)); 
 
      height = height - 1; 
 
      Bot = Bot - 0.5; 
 
      el.style.bottom = Bot + "px"; 
 
      el.style.height = height + "px"; 
 
      if (height < 50) { 
 
       MaxHeight = true; 
 
       finished = true; 
 
       el.style.bottom = 0 + "px"; 
 
       el.style.height = 50 + "px"; 
 
      } 
 
      } 
 
      window.requestAnimationFrame(_anim); 
 
     } else { 
 
      resolve(); 
 
     } 
 
     } 
 
     _anim(); 
 
    }); 
 
    } 
 
    anim().then(loading); 
 
}
body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    margin: auto; 
 
} 
 
#loader { 
 
    display: block; 
 
    position: fixed; 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: white; 
 
    z-index: 9999; 
 
} 
 
#loader .center { 
 
    position: relative; 
 
    height: 50px; 
 
    width: 200px; 
 
    background-color: red; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    margin: auto; 
 
} 
 
#loader .center div { 
 
    width: 2px; 
 
    height: 50px; 
 
    background-color: blue; 
 
    float: left; 
 
    padding: 0px; 
 
    margin-right: 5px; 
 
    margin-bottom: 25px; 
 
    position: relative; 
 
}
<body onload="loading()"> 
 
    <div id="loader"> 
 
    <div class="center" id="loader-ul"> 
 
     <div></div> 
 
     <div></div> 
 
     <div></div> 
 
     <div></div> 
 
     <div></div> 
 
     <div></div> 
 
     <div></div> 
 
     <div></div> 
 
     <div></div> 
 
     <div></div> 
 
     <div></div> 
 
     <div></div> 
 
     <div></div> 
 
     <div></div> 
 
     <div></div> 
 
     <div></div> 
 
    </div> 
 
    </div> 
 
</body>

出典

2016-09-24 22:57:01

+0

あなたのコードは私が欲しかったとおりに動作します、ありがとう！あなたのコードがなぜ機能するのか、私のものでないのか5歳のように説明できますか？私はなぜこれが動作し、私は理解していない。 – GeorGios

+0

作業を約束するためには、すべてのコードパスがparam1（result）またはparam2（reject）に到達するか、エラーをスローする必要があります。 'result'に到達する唯一の方法はfinish === trueの場合ですが、finish = trueを設定するコードパスは' window.requestAnimationFrame（anim） 'を決して呼び出さないので、' loading'は決して再び呼び出されません。そのパスから 'window.requestAnimationFrame（anim）'が呼び出されたとしても、promiseはanim（）からのものではなく（ロード）、最後の 'window.requestAnimationFrame（anim）'が呼び出されました。あなたのコードを上から下に変更しないようにしました。変更された内容をまだ見ることができます。 –

+0

ありがとう、私は理解し、それは動作します。あなたは私の一日を作った！ – GeorGios

0

window.requestAnimationFrame(anim);を呼び出すと、約束が解決されることはありません。それはanimと呼ばれ、別の約束を作成します。これは完了したら解決するかもしれませんが、元の約束は決して達成されません。

new Promiseのコンストラクタ内にanimの全身をラップする代わりに、​​のみを約束し、それを使用して約束を構築する必要があります。

function animate(element){ 
    var el = element[index]; 
    var MaxHeight = false; 
    var finished = false; 
    function getFrame() { 
     return new Promise(function(resolve) { 
      window.requestAnimationFrame(resolve); 
     }); 
    } 
    function anim(){ 
     if (finished == false){ 
      if (MaxHeight == false){ 
       var height = parseInt(window.getComputedStyle(el).height.slice(0, -2)); 
       var Bot = parseFloat(window.getComputedStyle(el).bottom.slice(0, -2)); 
       height = height + 1; 
       Bot = Bot + 0.5; 
       el.style.bottom = Bot + "px"; 
       el.style.height = height + "px"; 
       if (height <= 100){ 
        return getFrame().then(anim); 
//     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 
       } else{ 
        MaxHeight = true; 
       } 
      } 
      if (MaxHeight == true){ 
       var height = parseInt(window.getComputedStyle(el).height.slice(0, -2)); 
       var Bot = parseFloat(window.getComputedStyle(el).bottom.slice(0, -2)); 
       height = height - 1; 
       Bot = Bot - 0.5; 
       el.style.bottom = Bot + "px"; 
       el.style.height = height + "px"; 
       if (height >= 50){ 
        return getFrame().then(anim); 
//     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 
       } else{ 
        MaxHeight = true; 
        finished = true; 
        el.style.bottom = 0 + "px"; 
        el.style.height = 50 + "px"; 
       } 
      } 
     } 
     return Promise.resolve(); 
    } 
    return anim().then(loading); 
}

出典

2016-09-24 22:55:47 Bergi

+0

私は少し混乱しています。あなたが話しているコードを投稿できますか？ – GeorGios

+0

私はそれをテストして働きたくありません。 – GeorGios

+0

括弧があまりにも多すぎます。もう一度やり直せますか？それは動作するはずです。 – Bergi

関連する問題

 関連する問題