JS线程和异步 · iTibbers

重新认识javascript的settimeout和异步

今晚看到QLeelulu的一道JavaScript面试题（setTimeout），稍微想了一下，好不容易连猜带蒙，凑巧说对了答案。但是原因到底是什么呢？自己一时也说不太清楚，反正感觉就是一个死循环造成的。然后看了一下文章下面的评论，发现5楼和6楼的回答很有道理,主要意思就是说javascript引擎是单线程执行的，while循环那里执行的时候，settimeout里面的函数根本没有执行的机会，这样while那里永远为真，造成死循环。但是单纯看还是不怎么踏实，最后发挥实践精神，自己动手做了两个实验：

1、简单的settimeout

setTimeout(function () { while (true) { } }, 1000);
setTimeout(function () { alert('end 2'); }, 2000);
setTimeout(function () { alert('end 1'); }, 100);
alert('end');

执行的结果是弹出‘end’‘end 1’，然后浏览器假死，就是不弹出‘end 2’。也就是说第一个settimeout里执行的时候是一个死循环，这个直接导致了理论上比它晚一秒执行的第二个settimeout里的函数被阻塞，这个和我们平时所理解的异步函数多线程互不干扰是不符的。

2、ajax请求回调

接着我们来测试一下通过xmlhttprequest实现ajax异步请求调用，主要代码如下：

var xmlReq = createXMLHTTP();//创建一个xmlhttprequest对象
function testAsynRequest() {
    var url = "/AsyncHandler.ashx?action=ajax";
    xmlReq.open("post", url, true);
    xmlReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xmlReq.onreadystatechange = function () {
        if (xmlReq.readyState == 4) {
            if (xmlReq.status == 200) {
                var jsonData = eval('(' + xmlReq.responseText + ')');
                alert(jsonData.message);
            }
            else if (xmlReq.status == 404) {
                alert("Requested URL is not found.");
            } else if (xmlReq.status == 403) {
                alert("Access denied.");
            } else {
                alert("status is " + xmlReq.status);
            }
        }
    };
    xmlReq.send(null);
}
testAsynRequest();//1秒后调用回调函数

while (true) {

}

在服务端实现简单的输出：

private void ProcessAjaxRequest(HttpContext context)
{
    string action = context.Request["ajax"];
    Thread.Sleep(1000);//等1秒
    string jsonObject = "{\"message\":\"" + action + "\"}";
    context.Response.Write(jsonObject);
}

理论上，如果ajax异步请求，它的异步回调函数是在单独一个线程中，那么回调函数必然不被其他线程”阻挠“而顺利执行，也就是1秒后，它回调执行弹出‘ajax’，可是实际情况并非如此，回调函数无法执行，因为浏览器再次因为死循环假死。

结论：根据实践结果，可以得出，javascript引擎确实是单线程处理它的任务队列（能理解成就是普通函数和回调函数构成的队列吗？）的。在javascript里实现异步编程很大程度上就是一种障眼法，单线程的引擎实现多线程的编程，如果要实现一些资源同步互斥之类的操作（一如C#、Java等语言的多线程），我感觉真正实现起来根本无法轻易得到保证。

补充：如何实现javascript的sleep呢？在stackoverflow上找到一篇javascript sleep，试了一下，效果是有了，但是执行的时候cpu很高，真还不如直接settimeout呢。

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

http://www.cnblogs.com/QLeelulu/archive/2011/06/13/2079965.html
一道JavaScript面试题（setTimeout）

下面的代码，多久之后会弹出’end’？为什么？

var t = true;

setTimeout(function(){ t = false; }, 1000);

while(t){ }

alert(‘end’);

这是以前在想有没办法实现阻塞javascript线程的时候（即实现sleep方法），想过的一种实现。
很简单，是吧？
是吗？

timeout 回调是要等退出全部 execution context stack 后,才去计时的.
典型的死循环……js是单线程执行的，while里面死掉的时候setTimeout里面的函数是没机会执行的。

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

http://www.jb51.net/article/70971.htm

虽然有越来越多的网站在应用AJAX技术进行开发，但是构建一个复杂的AJAX应用仍然是一个难题。

造成这些困难的主要原因是什么呢？是与服务器的异步通信问题？还是GUI程序设计问题呢？通常这两项工作都是由桌面程序来完成的，那究竟为何开发一个可以实现同样功能的AJAX应用就这么困难呢？

大家都知道javascript是单线程执行的，但是又可以通过setTimeout或者setInterval定时执行一个方法，通过Ajax可以在向服务器端发送请求没有收到回应可以继续执行主逻辑。这些是如何做到的呢，下面就来探讨下。

先看如下一段代码：

<html>
  <body>
  <script type="text/javascript">
    function printHello()
    {
      console.time("hello");
    }
    function printHello1()
    {
      console.timeEnd("hello");
    }
    setTimeout(printHello,1000);
    setTimeout(printHello1,5000);
    function wait(time)
    {
      var now = Date.now();
      while(Date.now() - now < time)
      {
      }
    }
    wait(5000);
  </script>
  </body>
</html>

以上代码得执行结果为

hello: 0.124ms

从代码可以看出，printHello 与printHello1几乎是同时执行的。如果对于多线程模型，应该执行间隔是4000ms。

以上的原因是setTimeout只是将事件到时间点压入队列，而不是立即执行。具体何时执行还要看浏览器的空闲程度。

其实虽然javascript是单线程的，但是浏览器是多线程的，典型的浏览器有如下线程：

javascript引擎线程
界面渲染线程
浏览器事件触发线程
Http请求线程

javascript单线程指的是javascript引擎线程单线程处理它的事件队列，而浏览器是事件驱动的，很多事件都是异步的，比如鼠标点击事件，setTimeout，Ajax回调事件，当这些事件发生时，浏览器会将这些事件放入执行队列，待浏览器空闲时再执行。

另外，值得一提的是，ajax调用确实是异步的，浏览器会启动一个新线程来想服务端发送请求，如果设置了回调事件，会根据服务端返回状态将回调事件放入事件队列。

 function printHello()
{
  console.time("hello");
}
function printHello1()
{
  console.timeEnd("hello");
}
setTimeout(printHello,1000);

setTimeout(printHello1,5000);

如果执行这段代码，得到的却是接近4000ms的结果，验证了
setTimeout只是将事件到时间点压入队列，而不是立即执行。具体何时执行还要看浏览器的空闲程度。