Javascript函数在完成while循环之前继续进行。

Question

我被困在这个then循环，我想迭代一个简短的动画3次，然后隐藏运行动画的div。

$(document).ready(function () {
var count = 3;
while (count > 0) {
    $('img.arrow').animate({
        width: '+=25', height: '+=25', left: '-=15', top: '-=10'
    });
    $('img.arrow').animate({
        width: '-=25', height: '-=25', left: '+=15', top: '+=10'
    });
    count = count - 1;
}
if (count == 0) {
    hideDiv();
}
});

function hideDiv() {
$('.arrow_container').hide("slow");
};

如果删除hideDiv();调用，动画将按预期工作(3次迭代)，但如果添加它，则在第一个“动画”调用的一半之后，Div将被隐藏。

为什么检查count == 0的if语句没有阻止它调用hideDiv方法？我是不是遗漏了什么？

Answer 1

动画调用只触发动画，它不会等到动画实际完成。因此，您的循环在没有时间的情况下运行，然后计数为0，div被隐藏。

当动画完成时，您必须使用回调函数来学习。

见文档：https://api.jquery.com/animate/

Answer 2

css动画正在被触发，但它们需要时间。JS不会等待动画完成，只会触发动画命令、迭代、触发命令、迭代等等。在css动画完成之前，“if”条件为真。

一种解决方案是使用css来设置最终属性，而不是jQuery。比如: 0-99%是你的动画，100%是显示:零。

Answer 3

谢谢您的回复，我只选择了设置动画时间和延迟功能。

这可能有缺点吗？

$(document).ready(function () {
var count = 3;
while (count > 0) {
    $('img.arrow').animate({
        width: '+=25', height: '+=25', left: '-=15', top: '-=10'
    }, 300);
    $('img.arrow').animate({
        width: '-=25', height: '-=25', left: '+=15', top: '+=10'
    }, 300);
    
    count = count - 1;
    setTimeout(() => { hideDiv(); }, 1800);
}
});