javascript - 异步/等待 jquery 动画

Question

我想链接 Jquery 动画，为了可读性，我想让我的代码保持“垂直”而不是“水平”。

这是我所做的但不起作用:

async function close(id){
    return $(id).slideUp().promise();
}

async function shrink(id){
    return $(id).animate({width: '50%'}).promise();
}

[...]

function update(){
    await close("#myDiv");
    await shrink("#myDiv");
    doSomething();
}

但我得到一个错误:Syntax Error: await is only valid in async functions [...]

我知道我可以链接 Jquery 动画 (foo().bar()) 或使用这些函数的回调，但我的问题确实是关于 async/await

Answer 1

您几乎完成了 - 只是缺少一个 async。但为了完整起见，这里有几个不同的顺序运行 jQuery 动画的策略

链式动画调用

.animate()会自动将动画放入每个元素的队列中。默认情况下设置为 true，但您可以通过传递选项 { queue: false } 来覆盖以强制立即触发后续动画。

此示例将首先对 marginLeft 进行动画处理，然后对 marginTop 进行动画处理:

$("#a")
    .animate({marginLeft: "40px"}, 1000)
    .animate({marginTop: "40px"}, 1000)

$("#a")
  .animate({marginLeft: "40px"}, 1000)
  .animate({marginTop: "40px"}, 1000)

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

动画+队列

正如刚刚观察到的，动画会自动排队，但如果您想将自己的方法添加到队列中，可以调用.queue()。添加您自己的代码。只需确保在完成后调用 next() 参数以开始队列中的下一个操作。

此示例将首先为 marginLeft 设置动画，然后更改文本，然后为 marginTop 设置动画:

$("#a")
  .animate({marginLeft: "40px"}, 1000)
  .queue(function(next) {
    $(this).text("Hi");
    next();
  })
  .animate({marginTop: "40px"}, 1000)

$("#a")
  .animate({marginLeft: "40px"}, 1000)
  .queue(function(next) {
    $(this).text("Hi");
    next();
  })
  .animate({marginTop: "40px"}, 1000)

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

Promises + 异步/等待

您可以通过调用 .promise() 然后等待 promise 将动画转换为 promise 。

注意:只需确保自await is only valid in async function起将您的函数标记为async .

此示例将首先为 marginLeft 设置动画，然后更改文本，然后为 marginTop 设置动画:

async function main() {
  await $("#a").animate({marginLeft: "40px"}, 1000).promise()
  $("#a").text("Hi");
  await $("#a").animate({marginTop: "40px"}, 1000).promise()
}
main()

async function main() {
  await $("#a").animate({marginLeft: "40px"}, 1000).promise()
  $("#a").text("Hi");
  await $("#a").animate({marginTop: "40px"}, 1000).promise()
}
main()

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

jQuery.When()

您可以通过调用 $.when 将多个动画组合在一起。在多个延迟元素上同时执行它们。这会返回一个可以等待或传递回调的 promise 。

这个例子将完成两个元素的动画，然后开始下一个动画:

$.when(
  $("#a").animate({marginLeft: "40px"}, 1000),
  $("#b").animate({marginLeft: "40px"}, 1000),
).then(()=>{
  $("#a").animate({marginTop: "40px"}, 1000);
  $("#b").animate({marginTop: "40px"}, 1000);
})

$.when(
  $("#a").animate({marginLeft: "40px"}, 1000),
  $("#b").animate({marginLeft: "40px"}, 1000),
).then(() => {
  $("#a").animate({marginTop: "40px"}, 1000);
  $("#b").animate({marginTop: "40px"}, 1000);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="a">Hello</div>
<div id="b">Goodbye</div>

延伸阅读

• > JQuery synchronous animation
• > when is asynchronous and when it's not?
• > Single queue for jQuery animate() elements
• > JS/jQuery: Wait for function with animations to be finished