javascript setTimeout 0

標籤：

    本文提供了一個 javascript 方面的 setTimeout 的一個例子，在執行長時間的堵塞任務時，相關頁面渲染會有問題，直接提供代碼，拿代碼說例子是最簡單的：

    

<html><script src= "js/jquery-1.10.2.min.js" type="text/javascript"></ script><body>        <button id= ‘do‘>Do long calc!</ button>        <div id= ‘status‘></div >        <div id= ‘result‘></div >        <script type= "text/javascript">              jQuery( ‘#do‘).on( ‘click‘, function(){              jQuery( ‘#status‘).text(‘calculating....‘ );//此處會觸發redraw事件的fired，但會放到隊列裡執行，直到long()執行完。                                           // without set timeout, user will never see "calculating...."                             //long();//執行長時間任務，阻塞 // with set timeout, works as expected              setTimeout( long,50);//用定時器，大約50ms以後執行長時間任務，放入執行隊列，但在redraw之後了，根據先進先出原則       })               function long (){               var result = 0               for (                      var i = 0; i<1000; i++){                      for(var j = 0; j<1000; j++){                            for (var k = 0; k<1000; k++){                                  result = result + i + j + k;                           }                     }              }              jQuery( ‘#status‘).text(‘calclation done‘ )               // has to be in here for this example. or else it will ALWAYS run instantly. This is the same as passing it a callback       }        </script></body></html>

    這個例子很有意思，如果不使用 setTimeout( long,50); 方法的話，頁面執行過程中，是不會出現  calculating…… 的。

    

    javascript是JS運行在瀏覽器中，是單線程的，每個window一個JS線程，既然是單線程的，setTimeout(func, 0)神奇在哪兒？那就是告訴js引擎，在0ms以後把func放到主事件隊列中，等待當前的代碼執行完畢再執行，注意：重點是改變了代碼流程，把func的執行放到了等待當前的代碼執行完畢再執行。這就是它的神奇之處了。它的用處有三個：
1：讓瀏覽器渲染當前的變化（很多瀏覽器UI render和js執行是放在一個線程中，線程阻塞會導致介面無法更新渲染） 2：重新評估”script is running too long”警告 3：改變執行順序
例如：上面的例子，點擊按鈕就會顯示"calculating...."，如果刪除setTimeout就不會。因為reDraw事件被進入事件隊列到長時間操作的最後才能被執行，所以無法重新整理。 兩個地方可以執行 long() 方法   或者執行 setTimeout( long ,50);

javascript setTimeout 0