一道JavaScript面試題（setTimeout）

下面的代碼，多久之后會彈出'end'? 為什么?

這是以前在想有沒辦法實現(xiàn)阻塞javascript線程的時候(即實

var t = true;  
 
setTimeout(function(){ t = false; }, 1000);  
 
while(t){ }  
 
alert('end'); 

現(xiàn)sleep方法)，想過的一種實現(xiàn)。

很簡單，是吧?

是嗎?

重新認識javascript的settimeout和異步

今晚看到QLeelulu的一道JavaScript面試題(setTimeout)，稍微想了一下，好不容易連猜帶蒙，湊巧說對了答案。但是原因到底是什么呢?自己一時也說不太清楚，反正感覺就是一個死循環(huán)造成的。然后看了一下文章下面的評論，發(fā)現(xiàn)5樓(典型的死循環(huán)……js是單線程執(zhí)行的，while里面死掉的時候setTimeout里面的函數是沒機會執(zhí)行的。)和6樓(setTimeout 只是掛了個定時任務，但是 JS 本身是單線程的，while 那里肯定死掉了。)的回答很有道理,主要意思就是說javascript引擎是單線程執(zhí)行的，while循環(huán)那里執(zhí)行的時候，settimeout里面的函數根本沒有執(zhí)行的機會，這樣while那里永遠為真，造成死循環(huán)。但是單純看還是不怎么踏實，最后發(fā)揮實踐精神，自己動手做了兩個實驗：

1、簡單的settimeout

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

執(zhí)行的結果是彈出‘end’‘end 1’，然后瀏覽器假死，就是不彈出‘end 2’。也就是說第一個settimeout里執(zhí)行的時候是一個死循環(huán)，這個直接導致了理論上比它晚一秒執(zhí)行的第二個settimeout里的函數被阻塞，這個和我們平時所理解的異步函數多線程互不干擾是不符的。

2、ajax請求回調

接著我們來測試一下通過xmlhttprequest實現(xiàn)ajax異步請求調用，主要代碼如下：

var xmlReq = createXMLHTTP();//創(chuàng)建一個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) {  
 
       } 

在服務端實現(xiàn)簡單的輸出：

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

理論上，如果ajax異步請求，它的異步回調函數是在單獨一個線程中，那么回調函數必然不被其他線程”阻撓“而順利執(zhí)行，也就是1秒后，它回調執(zhí)行彈出‘ajax’，可是實際情況并非如此，回調函數無法執(zhí)行，因為瀏覽器再次因為死循環(huán)假死。

結論：根據實踐結果，可以得出，javascript引擎確實是單線程處理它的任務隊列(能理解成就是普通函數和回調函數構成的隊列嗎?)的。在javascript里實現(xiàn)異步編程很大程度上就是一種障眼法，單線程的引擎實現(xiàn)多線程的編程，如果要實現(xiàn)一些資源同步互斥之類的操作(一如C#、Java等語言的多線程)，我感覺真正實現(xiàn)起來根本無法輕易得到保證。

補充：如何實現(xiàn)javascript的sleep呢?在stackoverflow上找到一篇javascript sleep，試了一下，效果是有了，但是執(zhí)行的時候cpu很高，真還不如直接settimeout呢。

原文鏈接：http://www.cnblogs.com/jeffwongishandsome/archive/2011/06/13/2080145.html

【編輯推薦】

1. JavaScript重構深入剖析
2. 19個很有用的JavaScript庫強烈推薦
3. 驚動大神的JavaScript：在Web上運行Linux
4. 15款超棒的JavaScript開發(fā)工具推薦
5. 從零開始學習jQuery之你必須知道的JavaScript