js是多线程的吗，为什么可以同时执行多个语句？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head><body>
<div id="person" style=" width:50px; height:50px; background:#f00;"></div>
<div id="animal" style=" width:50px; height:50px; background:#0f0;"></div>
<script type="text/javascript">
$('#person').animate({width: '200px', height: '200px'}, 1000);
$('#animal').animate({width: '200px', height: '200px'}, 1000);
</script>
</body>
</html>
例子中，两个div的宽度同时被加宽

解决方案 »

  1.   

    animate实际上代码执行时间很短的，大部分的时间都在等待。一般animate是用定时器的方法实现的，一般fps在80-50之间，也就是每次等待10-20毫秒左右，每祯计算处理时间我测试是1-3毫秒
      

  2.   

    改一下你的jQuery 代码，这样就比较清晰明了了！他们是单线程的$('#person').animate({width: '300px', height: '300px'}, 10000);
    $('#animal').animate({width: '300px', height: '300px'}, 20000);
      

  3.   

    其实吧，JS有个任务队列，先被调用的函数先执行，执行完了执行下面的。animate他里面说到底就是调用计时器，计时器本身呢就是执行完了之后再在队列后面添加一个应该调用的函数，如此就一直执行啊执行啊，直到clear掉了。
      

  4.   

    很久之前就对jQuery.animate的实现非常感兴趣，不过前段时间很忙，直到前几天端午假期才有时间去研究。jQuery.animate的每种动画过渡效果都是通过easing函数实现的。jQuery1.4.2中就预置了两个这样的函数：easing: {
    linear: function( p, n, firstNum, diff ) {
    return firstNum + diff * p;
    },
    swing: function( p, n, firstNum, diff ) {
    return ((-Math.cos(p*Math.PI)/2) + 0.5) * diff + firstNum;
    }
    }从参数名隐约可以推测出firstNum是初始值。要是你的数学学得比较好，你可以发现linear函数是直线方程；要是你的物理学得比较好，你可以发现它是匀速运动的位移方程（我数学和物理都没学好，是别人提醒我的……）。那么diff和p就是速度和时间了。再看看jQuery.animate的原型：animate: function( prop, speed, easing, callback )各参数的说明如下：    prop：一组包含作为动画属性和终值的样式属性和及其值的集合。
        speed：动画时长。
        easing：要使用的擦除效果的名称。
        callback：动画完成时执行的函数。元素的当前样式值（firstNum）可以获取，动画时长（p）就是duration，最终样式值是prop。理论上说，动画速度（diff）是可 以算出来的。但是这又必然需要另一个函数进行运算。这样做明显是不明智的。再看看调用easing函数的相关代码（位于 jQuery.fx.prototype.step中）：var t = now()；
    ...
    var n = t - this.startTime;
    this.state = n / this.options.duration;
    ...
    this.pos = jQuery.easing[specialEasing || defaultEasing](this.state, n, 0, 1, this.options.duration);可以发现，p参数的值也就是this.state的值，从上下文得知它实际上是动画的时间进度。而firstNum和diff的参数值都是写死的，分别是0和1。这下easing函数的秘密完全被解开，p、firstNum、diff都是百分率而非实际数值，easing函数的返回值也就是位移的进度。diff的值是1，也就是以1倍的速度运行动画。算出位移进度后，通过“初始值+（最终值-初始值）×进度”就可以算出当前位移值：this.now = this.start + ((this.end - this.start) * this.pos);通过setInterval每隔一定时间（jQuery中是13ms）进行一次位移运算，直到当前时间与初始时间的差值大于动画时长，这就是jQuery.animate的执行过程。按照常规思路，动画的实现方式是这样的：通过setInterval每隔一定时间给某个值增加特定数值，直到这个值达到限制值。这样做的主要问题是，不同浏览器的运行速度不同，从而导致动画速度有差异，一般是IE下比较慢，Firefox下比较快。而jQuery.animate是以当前时间来决定位移值，某个时刻的位移值总是固定的，因而动画速度不会有差异。