事件不排隊正確

我有這樣的代碼http://jsfiddle.net/ee1xuaqs/1/：事件不排隊正確

function long_running(status_div) { // does something for 2-3 seconds 

    var result = 0; 
    // Use 1000/700/300 limits in Chrome, 
    // 300/100/100 in IE8, 1000/500/200 in FF 
    alert('running'); 
    for (var i = 0; i < 1000; i++) { 
     for (var j = 0; j < 700; j++) { 
      for (var k = 0; k < 300; k++) { 
       result = result + i + j + k; 
      } // end inner 
     } // end outer for 
    } 

} 

$('#do_ok').on('click', function() { 
    $('#status_ok').text('calculating....'); 
    window.setTimeout(function(){ long_running('#status_ok') }, 1000); 
    $('#status_ok').text('calclation done'); 
});

隨着這個HTML：

<table border=1> 
    <tr><td><button id='do_ok'>Do long calc</button></td> 
     <td><div id='status_ok'>Not Calculating yet.</div></td> 
    </tr> 
</table>

現在，當我點擊按鈕，我得到「計算完成」表示（'正在計算...'可能閃爍一毫秒或兩秒）。

據我所知，$('#do_ok').on中的這3個命令中的每一個都創建了一個單獨的事件，兩個用於更新DOM，另一個用於setTimeout，在1秒後完成。對於jQuery DOM更新命令，DOM會立即更新，但是，它們也會創建DOM-repaint事件，並像往常一樣進行處理（根據此highly voted SO answer）。由於我得到3個事件，他們應該按照適當的順序執行，首先是「計算..」，更新屏幕，然後long_running以及所有這些，calculation done。

那麼爲什麼我會在執行long_running之前得到'計算完成'？

來源

2016-01-20 daremkd

你已經做了最接近的事情，javascript已經用'setTimeout'行來「產生一個新線程」。有人會很快提供更好的科學細節，但這個問題大約有100個重複。 – Jamiec

@Jamiec 100重複？你能指出一個嗎？我沒有看到任何問題，詢問爲什麼渲染事件優先於時間事件。 – daremkd

我看過「爲什麼X會在Y之前發生」（其中Y是對'setTimeout'的調用）的次數是不可估量的。我現在要去狩獵他們，可惜不是！ – Jamiec

的點擊回調的執行過程如下：

$('#status_ok').text設置爲'calculating....'
的setTimeout設置你作爲一個參數傳遞後留出的時間是從執行它的功能。
$('#status_ok').text設置爲'calculation done'
當第二個傳遞，傳遞給setTimeout功能被執行

$('#status_ok').text('calculation done')應該是裏面的setTimeout功能正常工作。

來源

2016-01-20 12:34:01

這不是jQuery函數的工作方式。是的，DOM被更新，但是一個事件被分派給渲染器以顯示更新的DOM。這不是一個操作。 – daremkd

jQuery函數的工作方式與任何其他JS函數完全相同。試試這個簡單的例子： '（function（）{ console.log（'First'）; window.setTimeout（function（）{console.log（'Second'）;}，1000）; console.log 'Third'）; }）（）;' 輸出將是'First，Third，Second'。 –

事件不排隊正確

回答

相關問題