Javascript 警报框先运行吗？

下面我有一些jQuery/JS。首先要运行的是末尾的警报框

$(document).ready(function() {
    $("#id1 img , .msg").stop().animate(
        { width: '300px', height: '300px'}, 
        { duration: 'slow', easing: 'easeInSine' }).pause(3000);

    $(".msg").animate(
        { width: '50px', height: '50px' }, 
        { duration: 498, easing: 'easeOutSine' });
    $("#id1 img").animate(
        { width: '50px', height: '50px' }, 
        { duration: 500, easing: 'easeOutSine' });

    $("#id1 img , .msg").animate(
        { width: '300px',height: '300px'}, 
        { duration: 'slow', easing: 'easeInSine' }).pause(3000);

    alert('eh?');
});

我有一个插件

如果我运行此命令，警报将显示，然后第一个动画将出现在背景中，但不会显示。它将以最终尺寸显示

警报不应该在所有动画结束时运行吗

---

有人能解释为什么会发生这种情况吗？

jQuery animate在设置动画时不会阻止执行。相反，它仅在调用语句$（）时排队。调用animate

---

因此，您的alert（）语句被“先调用”。但事实上，animate语句是在alert（）之前调用的，只有该alert（）在动画完成之前阻止了执行。

此暂停插件表示它在指定的时间内“保存队列中的所有内容”。它实际上不会暂停执行（javascript中没有休眠）

---

因此，这正是预期的结果，警报将首先显示。

正如其他评论员所提到的，动画方法是非阻塞的，因此这是正确的行为。如果希望在动画结束时调用警报，请查看animate方法的回调参数。文档中说：“每当动画完成时要执行的函数，对动画中的每个元素执行一次。”

---

正如在代码的开头，您有

$(document).ready(function(){

该函数表示文档准备好后，加载后面的函数。 因此，在您正在运行的动画结束时，您需要添加另一个函数，告诉它在动画完成后运行警报。 下面是一个例子：

 $(document).ready(function(){
   $("button").click(function(){
     $("p").animate({width:25},3000,function(){
      alert("The paragraph has been animated");
    });
   });
  });

单击按钮时，所有p元素的宽度在3秒内缩小到25像素（jQuery以毫秒为单位读取），完成后，它将运行警报“段落已设置动画”功能。 希望这有帮助