按顺序向上滑动元素 [英] slide up elements in a sequential order

问题描述

依次需要slideUp个元素，而不是异步地.

Need to slideUp elements sequencially, one by one, not asynch.

block2应该开始滑动.

block3应该开始滑动.

以此类推.实际上，我有很多这样的元素，因此任何嵌套语法(函数内部的函数)都不适合.

And so on. In reality I have a lot of such elements so any nested syntax (function inside function) is not suitable.

我希望async await是正确的方法，但不能完全理解.

I hope async await is the right way but cannot understand fully.

这是我的尝试:

$('button').on('click', function(){
close_all();
});
async function close_all(){
  await close1();
  await close2();
  await close3();
}
function close1(){
$('#block1').slideUp();
}
function close2(){
$('#block2').slideUp();
}
function close3(){
$('#block3').slideUp();
}

.block{
display:inline-block;
width:14%;
background:gold;
margin:0 9px;
}
#block1{
height:54px;
}
#block2{
height:25px;
}
#block3{
height:72px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='block' id='block1'>BLOCK 1</div>
<div class='block' id='block2'>BLOCK 2</div>
<div class='block' id='block3'>BLOCK 3</div>
<button>CLICK</button>

推荐答案

一种方法是使用on complete回调，您可以在

One way could be using the on complete callback that you can use on the slideUp() method:

$('button').on('click', function()
{
    close_all($(".block"));
});

function close_all(elements, idx=0)
{
    if (idx >= elements.length)
        return;

    let cb = () => close_all(elements, idx + 1);    
    elements.eq(idx).slideUp(2000, cb);
}

.block {
  float: left;
  width:14%;
  background:gold;
  margin:0 9px;
}

#block1{
  height:54px;
}

#block2{
  height:25px;
}

#block3{
  height:72px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='block' id='block1'>BLOCK 1</div>
<div class='block' id='block2'>BLOCK 2</div>
<div class='block' id='block3'>BLOCK 3</div>
<button>CLICK</button>

这篇关于按顺序向上滑动元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！