改變DOM元素，而其他進程正在運行

Question

function subProcess() { 
 
    var f = []; 
 
    for (var i = 0; i < 10000; i++) { 
 
    for (var j = 0; j < 100000; j++) {} 
 
    f.push(1); 
 
    } 
 
} 
 

 
var statusElement = document.getElementById('status'); 
 

 
statusElement.innerHTML = "1"; 
 
subProcess(); 
 
statusElement.innerHTML += "<br/>2"; 
 
subProcess(); 
 
statusElement.innerHTML += "<br/>3"; 
 
subProcess(); 
 
statusElement.innerHTML += "<br/>4"; 
 
subProcess(); 
 
statusElement.innerHTML += "<br/>5"; 
 
subProcess(); 
 
statusElement.innerHTML += "<br/>6"; 
 
subProcess(); 
 
statusElement.innerHTML += "<br/>7"; 
 
subProcess(); 
 
statusElement.innerHTML += "<br/>8"; 
 
statusElement.innerHTML = "finished";

<div id='status'></div>

我有一個簡單的願望，我可以解決，但我的問題是正確的方式。

我有需要時間的過程。 該過程分爲幾個子過程。當每個子過程結束時，我想在某個段落元素上寫下它。

問題在於段落沒有更新，直到大進程結束，並且因爲瀏覽器被佔用，並且它將被釋放，它將更新DOM。

我知道我可以簡單地把每個子進程超時10毫秒或類似的東西，它正在做這項工作。

問題是唯一的方法？ 這是一個函數，告訴瀏覽器做你的工作，並告訴你什麼時候完成？

例如，

// process start 

// writing the status to paragraph 
// wait till browser update the dom elements 
// sub process 1 start 

// writing the status to paragraph 
// wait till browser update the dom elements 
// sub process 2 start 

// writing the status to paragraph 
// wait till browser update the dom elements 
// sub process 3 start 

// writing the status to paragraph 
// wait till browser update the dom elements 
// process 1 ends 

我的問題是，處理時間對我很重要。我看到當我把0毫秒的超時它不工作的原因。因此每個子過程的10毫秒可以總結爲半秒。

Answer 1

我覺得你描述的正是旨在解決Web Workers

Answer 2

有設置超時當一些最低限度。所以使用10ms是很好的。如果你堅持，這個帖子說它可能會降到4ms。 What is minimum millisecond value of setTimeout?

目前，我認爲除了setTimeout，clousure和callback的組合來解決您的問題外，沒有別的辦法。

var PIECE = 100; 
function print(string) { 
    var statusElement = document.getElementById('status'); 
    statusElement.innerHTML += ('' + string); 
} 
function subProcess(start, end) { 
    var i = 0, j = 0, finished = false; 
    var f = []; 
    // End comments meet. 
    if (start >= end) { 
    print('Finished'); 
    return; 
    } 

    var sub = function() { 
    var count = 0; 
    finished = true; 
    for (; i < 10000; ++i) { 
     for (; j < 10000; ++j) { 
     f.push(1); 
     ++count; 
     if (count >= PIECE) { 
      finished = false; 
      break; 
     } 
     } 
    } 
    if (finished) { 
     print(start); 
     subProcess(start + 1, end); 
     return; 
    } 
    setTimeout(sub, 10); 
    } 
    setTimeout(sub, 10); 
} 

JsFiddle

Answer 3

我覺得你越來越感到困惑。

首先就像我說的JavaScript不是多線程的。它依次運行一個執行每個命令的線程，直到完成所有命令（It's actually a bit more complicated than that，但現在可以完成）。

其次subProcess()不是一個過程，它是一個函數調用。這將全部線性處理。認爲這是：

statusElement.innerHTML = "1"; 
var f = []; 
    for (var i = 0; i < 10000; i++) { 
    for (var j = 0; j < 100000; j++) {} 
    f.push(1); 
    } 
statusElement.innerHTML += "<br/>2"; 
var f = []; 
    for (var i = 0; i < 10000; i++) { 
    for (var j = 0; j < 100000; j++) {} 
    f.push(1); 
    } 
...etc 

第三一旦線程是自由的DOM時，纔會更新，你的線程是不是免費的，直到最後因爲subProcess()不斷做的事情。 A setTimeoutwould work because this would release the thread to do other things