Question

我的html页面中有两个div

<div id="box1">
</div>

<div id="box2">
</div>

他们两人绝对处于不同的位置。

#box1,#box2 {
    height: 100px;
    width: 100px;
    background-color: red;
    position: absolute;
}

#box2 {
    top :200px;
}

在我的Javascript中，我正在动画这两个div，如下所示

$(document).ready(function() {

    function animateBoxes() {
        $("#box1").animate({left : "500px"},5000);
        $("#box2").animate({left : "500px"},3000);
    }

    animateBoxes();
});

当我的页面加载时，div同时开始移动。

我的问题是，如果javascript是单线程的，那么div是如何同时移动的。因为div的移动是由javascript通过两个动画函数处理的，一个在box1上，另一个在box2上。

两个动画功能如何同时执行？

Answer 1

Javascript是单线程意味着如果被卡住整个脚本被卡住......并且只有这样才能克服这个问题产生worker。要回答你的问题，你知道jquery的动画功能如何工作......它设置定时器来调用更新div位置的函数。所以这两个div都朝着他们的目标定位了一点。计时器由javascript提供，并像处理事件一样处理。 Javascript有事件循环......浏览器重申了这一点。一旦js完成，浏览器会浏览所有事件并检查它们是否已被触发，然后运行与它们关联的函数。这里的animate函数将自身与timer事件相关联，并逐渐更新div的位置，从而看起来像动画一样。并且因为它在步骤中发生，所以整个js不必等待该动画结束以继续执行。

这就是事件在js中的基本工作方式：

浏览器开始执行代码..
每个下一个动作都会等到最后一个动作完成。
当javascript到达将事件附加到事件的代码时，js注册事件，让我们说点击事件。现在它知道按钮有click事件，它有这个功能。
现在执行完所有代码后，浏览器启动新例程。检查已被解雇的任何事件。
...循环但没有事件..
您单击按钮...它添加了click事件已触发到事件循环检查列表。
浏览器再次检查事件循环......它会看到事件。
它运行该事件的代码并清除它......
假设您单击了两次...然后第二个事件的代码将不会开始执行，直到第一个事件完成。
计时器是相同的，但是每过了x个时间就会触发。但正如你所看到的那样，事件循环被执行与事件相关的功能......计时器并不完美。
假设您将计时器设置为10毫秒。并且在9ms过去后，您点击按钮开始另一个事件。所以你的按钮事件开始执行..但它做了很长的事情需要5毫秒。
所以你的计时器实际上是在14ms开火。

看一下这个例子：http://jsfiddle.net/82zLC/6/

这会让你想到动画被分成一块一块一块地更新的块...尝试将t改为60。

Answer 2

JavaScript在许多情况下都可以异步。 .animate()就是一个例子。它几乎必须异步，以便不中断其他页面进程。如果您正在寻找一个接一个地发生的事件，请尝试查看回调：

$("#box1").animate({left: "500px"},5000, function(){
    $("#box2").animate({left: "500px"},5000);
});

当我们将函数传递给.animate()时，它会在动画完成后调用该函数。

了解javascript中的线程

2 个答案: