了解javascript中的线程

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会注册事件,让我们说点击事件.现在它知道按钮有cli​​ck事件,它有这个功能.
• 现在,在执行了以下所有代码后,浏览器启动了新例程.检查已触发的任何事件.
• ...循环但没有事件..
• 你单击按钮...它添加单击事件已触发到事件循环检查列表.
• 浏览器再次检查事件循环...它看到事件.
• 它运行该事件的代码并清除它...
• 假设您单击了两次......那么第二个事件的代码将不会开始执行,直到第一个事件完成.
• 计时器是相同的,但每过了一段时间它就会触发.但正如您所看到的,事件循环被执行与事件相关的功能... ...定时器并不完美.
• 假设您将计时器设置为10毫秒.并且在9ms过去后,您点击按钮开始另一个事件.所以你的按钮事件开始执行..但它做了很长的事情花了5毫秒.
• 所以你的计时器实际上是在14ms开火.

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

这将让您了解动画被分为多个步骤更新的块...尝试将t更改为60.