jQueryでの約束を伴うカスケードチェーントランジション

Question

このsiteのように、フォームパーツの間では、いくつかのトランジションがいくつかのdivエレメントにチェーンで発生します。

しかし、トランジションは連鎖で実行する必要があります。すなわち、次のトランジションは、前のトランジションがの場合はすべての対応する要素が完了したときに進みます。したがって、1は.promise().done()

例を使用する必要がある：

$("#p1").slideUp("slow", function(){ 
    $("#description"). 
     html(DescriptionHTML). 
     slideDown("fast", function(){ 
      $("#div1, #div3"). 
       hide(). 
       promise(). 
       done(function(){ 
        $("#div1_td, #div3_td"). 
         show(). 
         promise(). 
         done(function(){ 
          $("#p2"). 
           slideDown("slow", function(){ 
            $("#div1, #div3"). 
             show("slow"). 
             promise(). 
             done(function(){ 
              scrollPage(); 
            }); 
          }); 
         }); 
       }); 
      });   
     }); 

は、上記のコードのための任意のユーザーフレンドリーなショートカットはありますか？以下のような 何か：ES6で

.SyncChain({ 
    step1: function(){ 
      $("#p1").slideUp("slow"); 
     }, 
    step2: function(){ 
      $("#description").html(DescriptionHTML).slideDown("fast"); 
     }, 
    step3: function(){ 
      $("#div1, #div3").hide(); 
     }, 
    step4: function(){ 
      $("#div1_td, #div3_td").show(); 
     }, 
    step5: function(){ 
      $("#p1").slideDown("slow"); 
     }, 
    step6: function(){ 
      $("#div1, #div3").show("slow"). 
     } 
}); 

Answer 1

は、あなたは、発電機と呼ばれる特殊な機能を持っています。

この関数を使用すると、関数が再度呼び出されるまで関数の実行を中断するyield文を呼び出すことができます。

これは仕方

多かれ少なかれを探して同期非同期関数を記述することができます、あなたが

var myfunc; 
 

 
function* animation() { 
 
    yield $("#elem1").slideUp(5000, myfunc); 
 

 
    $('#info').html('step 1'); 
 

 
    yield $("#elem2").slideUp(5000, myfunc); 
 

 
    $('#info').html('step 2'); 
 

 
    yield $("#elem3, #elem4").each(function(n) { 
 
    $(this).fadeOut(5000 * (n + 1)); 
 
    }).promise().done(myfunc); 
 

 
    $('#info').html('step 3'); 
 

 
    yield $("#elem3, #elem4").each(function(n) { 
 
    $(this).fadeIn(5000 * (n + 1)); 
 
    }).promise().done(myfunc); 
 

 
    $('#info').html('step 4'); 
 
    yield $("#elem2").slideDown(5000, myfunc); 
 

 
    $('#info').html('step 5'); 
 
    yield $("#elem1").slideDown(5000, myfunc); 
 

 
    $('#info').html('step 6'); 
 

 
} 
 

 
function run() { 
 
    var gen = animation(); 
 
    myfunc = function() { 
 
    gen.next(); 
 
    }; 
 
    myfunc(); 
 
}

div { 
 
    width: 85px; 
 
    height: 100px; 
 
    margin: 10px; 
 
    background-color: tomato; 
 
    display: inline-block; 
 
    font-size: 40px; 
 
} 
 

 
span { 
 
    border: solid 1px black; 
 
    position: absolute; 
 
    top: 200px; 
 
    left: 80px; 
 
    height: 20px; 
 
    width: 300px; 
 
} 
 

 
button { 
 
    position: absolute; 
 
    top: 200px; 
 
    left: 15px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button onclick="run()">RUN</button> 
 
<div id="elem1">1</div> 
 
<div id="elem2">2</div> 
 
<div id="elem3">3</div> 
 
<div id="elem4">4</div> 
 
<div id="elem5">5</div> 
 
<span id="info"></span>

ような何かを書くことができ発電機能のアニメーションが生成器を返しますmyfuncに割り当てられているオブジェクトです。

次に、呼び出す完了関数は常に同じ関数です。

非同期に完了するメソッドを呼び出した後、再び呼び出されるまで関数を停止するようにyieldを設定します。