Question

我想在动画在第一个函数中运行完毕后运行第二个函数（blockdone）。

我知道我可以通过将blockdone放在animate方法的回调中来实现。但由于我正在进行的项目的具体原因，我无法做到这一点。

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

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

Answer 1

也许这不是很雄心勃勃，但既然你知道动画的持续时间，你可以使用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 2

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

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

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 3

我认为你回忆起回调论点。

您必须更改以下代码

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

如何使函数队列化

3 个答案: