jQuery中承諾的級聯鏈轉換

Question

正如您在此site上所看到的，在表單部件之間，多個轉換髮生在幾個div元素的鏈中。

但是，必須在鏈中執行轉換，即，當前一轉換完成其對應元素時，下一轉換正好前進。因此，人們需要使用.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(); 
            }); 
          }); 
         }); 
       }); 
      });   
     }); 

是否有上述代碼的用戶友好的捷徑嗎？ 喜歡的東西：

.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

在ES6，您有一個稱爲發電機特殊功能。

該函數允許調用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來停止函數，直到它再次被調用。