Question

正如您在此site上看到的，在表单部分之间，几个div元素的链中会发生多个转换。

但转换必须在链中执行，即当 all 其相应元素的先前转换完成时，下一个转换才会前进。因此，需要使用.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中，你有一个叫做generator的特殊功能。

此函数允许调用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以停止该函数，直到再次调用它为止。

层叠链转换与jQuery中的promises

1 个答案: