理解javascript中的线程

Understanding Threading in javascript

本文关键字：线程 javascript 理解      更新时间：2023-09-26

我的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上。

两个动画函数是如何同时执行的?

Javascript是单线程的意思是如果卡住了，整个脚本卡住了…克服这个问题的唯一方法就是繁殖worker。为了回答你的问题，你知道jquery的动画功能是如何工作的吗?它设置定时器来调用更新div位置的函数。这两个div都离目标更近了一点。计时器是由javascript提供的，并像处理事件一样处理。Javascript有事件循环，这是由浏览器重复的。这意味着一旦js完成，浏览器就会检查所有事件并检查它们是否已被触发，然后运行与它们相关的函数。这里animate函数将自己与timer事件关联，并逐渐更新div的位置，因此看起来像动画。因为它是分步骤进行的，所以整个js不需要等待动画结束才能继续执行。

js中事件的基本工作方式:

  • 浏览器开始执行代码…
  • 下一个动作等待上一个动作完成。
  • 当javascript到达将函数附加到事件的代码时，js注册该事件，我们说点击事件。现在它知道按钮有点击事件，它有这个功能。
  • 现在所有的代码已经执行完，浏览器开始新的例程。检查已触发的任何事件。
  • …
  • 你点击按钮…它将点击事件已经触发添加到事件循环检查列表。
  • 浏览器再次检查事件循环…
  • 它运行该事件的代码并清除它…
  • 假设你点击了两次…那么第二个事件的代码将不会开始执行，直到第一个事件完成。
  • Timer是相同的，但是它每x次触发一次。但是正如你所看到的，事件循环在执行与事件相关的函数时被卡住了……
  • 假设你将计时器设置为10毫秒。9毫秒过去了，你点击按钮开始另一个事件。所以你的按钮事件开始执行。但是它做了一些很长的事情，花了5毫秒。
    • 所以你的计时器实际上在14ms触发。

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

这将给你的想法，动画被分成块，并逐步更新…试着把t改成60

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

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

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

相关文章：