如何使函数排队

Question

我希望第二个函数(blockdone(在第一个函数中动画运行完毕后运行。

我知道我可以通过在 animate 方法的回调中放置 blockdone 来做到这一点。但是由于我正在从事的项目的特定原因，我不能这样做。

有没有办法在javaScript或jQuery中以某种方式对函数进行排队？

https://jsfiddle.net/bazzle/mdawnrtq/

function blockmove(){
    $('.block').animate({top: '100px'},{duration: 1000} ).animate({width: '0'});
};
function blockdone(){
    $('p').text('Done');
};
blockmove();
blockdone();

Answer 1

假设您知道运行动画的选择，您可以通过 jQuery queue 函数执行此操作。从字面上看，它允许您指定在队列中的所有其他函数完成时应调用的函数。

您可以指定队列的名称，因为可以为一个选择创建多个队列，但此函数处理的默认队列是存储效果 (.animate() ( 的队列。这正是你想要的，万岁！

function blockmove() {
  $('.block').animate({
    top: '100px'
  }, {
    duration: 1000
  }).animate({
    width: '0'
  });
};
function blockdone() {
  $('p').text('Done');
};
blockmove();
$('.block').queue(blockdone); // <-- CHANGED

html,
body {
  margin: 0;
}
.block {
  background-color: red;
  width: 100px;
  height: 100px;
  display: block;
  position: relative;
}
p {
  position: absolute;
  top: 1em;
  right: 1em;
  text-align: right;
  display: block;
  margin: 0;
}

<div class="block"></div>
<p></p>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
        integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
        crossorigin="anonymous"></script>

Answer 2

也许这不是很雄心勃勃，但是由于您知道动画的持续时间，因此可以使用setTimeout函数来延迟文本的显示吗？

function blockmove(){
    $('.block').animate({top: '100px'}, {duration: 1000}).animate({width: '0'});
    setTimeout(() => {
      $('p').text('Done');
    }, 1400);
};
blockmove();

html, body {
  margin: 0;
}
.block {
  background-color: red;
  width: 100px;
  height: 100px;
  display: block;
  position: relative;
}
p {
  position: absolute;
  top: 1em;
  right: 1em;
  text-align: right;
  display: block;
  margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block">
</div>
<p></p>

Answer 3

我认为你收到了回调参数。

您必须更改以下代码

function blockmove(callback){
    $('.block').animate({top: '100px'},{duration: 1000} ).animate({width: '0'},
      function(){
         if(typeof callback === "function") callback();
    });
};