Bản chất đồng bộ/không đồng bộ của hiển thị trình duyệt và thực thi javascript

Question

Tôi có một số quá trình xử lý sẽ mất vài giây để tôi muốn thêm chỉ báo trực quan trong khi đang xử lý.

.processing 
{ 
    background-color: #ff0000; 
} 

<div id="mydiv"> 
    Processing 
</div> 

Script:

$("#mydiv").addClass("processing"); 
// Do some long running processing 
$("#mydiv").removeClass("processing"); 

Tôi ngây thơ nghĩ rằng lớp sẽ được áp dụng cho các div và giao diện người dùng sẽ được cập nhật. Tuy nhiên, chạy điều này trong trình duyệt (trong Firefox ít nhất) div không bao giờ được đánh dấu. Ai đó có thể giải thích cho tôi lý do tại sao div của tôi không bao giờ được đánh dấu? Lớp được thêm vào, quá trình xử lý diễn ra và sau đó lớp được loại bỏ; giao diện người dùng không được cập nhật ở giữa và người dùng không bao giờ nhìn thấy nền màu đỏ.

Tôi biết JS là đơn luồng nhưng tôi luôn cho rằng hiển thị trình duyệt sẽ chạy đồng bộ và khi DOM được cập nhật. Giả định của tôi có đúng không?

Và quan trọng hơn, cách được khuyến nghị để đạt được hiệu ứng này là gì? Tôi có phải dẫn đến việc sử dụng setTimeout để xử lý chậm không đồng bộ và làm việc với một cuộc gọi lại không? Phải có một cách tốt hơn vì tôi thực sự không cần bất kỳ hành vi không đồng bộ nào ở đây; Tôi chỉ muốn giao diện người dùng làm mới.

EDIT:

JSFiddle: http://jsfiddle.net/SE8wD/5/

(Lưu ý, bạn có thể cần phải tinh chỉnh số lần lặp lại vòng lặp để cung cấp cho bạn một sự chậm trễ hợp lý trên máy tính của riêng bạn)

Answer 1

Force a redraw. Ngoài ra, hãy sử dụng Soren's code vì quá trình xử lý trên chuỗi giao diện người dùng có vẻ không tốt ...

Answer 2

Tôi không khuyến nghị đóng băng trình duyệt cho tập lệnh cân nặng. Trong trường hợp này, tôi muốn thay đổi mã để không đóng băng trình duyệt và DOM. Nếu trong mã của bạn có một số vòng lặp, bạn có thể gọi một hàm có độ trễ (sử dụng setInterval) và lưu trữ một số biến trạng thái ở đâu đó. Ví dụ:

for(var i=0; i<1000000; i++) { 
    // do something 
} 

thể là:

var i = 0; 
var intervalID; 
var _f = function() { 
    // do something 
    i++; 
    if(i==1000000) clearInterval(intervalID); 
} 
intervalID = setInterval(_f,1); 

Hoặc một cái gì đó tương tự và nhiều hơn nữa được tối ưu hóa. Mã của bạn sẽ phức tạp hơn một chút và chậm hơn ... nhưng vì vậy bạn ngăn chặn trình duyệt bị đóng băng và bạn có thể tạo thanh trạng thái tải trước nâng cao.

Answer 3

Bạn có thể nên xử lý trong một sự kiện riêng biệt, như thế này;

$("#mydiv").addClass("processing"); 
setTimeout(function(){ 
    // This runs as a seperate event after 
    // Do some long running processing 
    $("#mydiv").removeClass("processing"); 
},1); 

Bằng cách đó trình duyệt nên vẽ lại màn hình với processing, trong khi bước dài chạy sẽ bắt đầu như một sự kiện riêng biệt, và loại bỏ các thông điệp xử lý khi thực hiện xong.

Answer 4

Trình duyệt hoàn toàn miễn phí về thời điểm sơn lại và khi nào cần chỉnh lại. Động cơ khác nhau sẽ hiển thị hành vi khác nhau. Để đọc thêm, hãy xem When does reflow happen in a DOM environment?. Trong ví dụ của bạn, trình duyệt sẽ thấy bạn thêm một lớp và xóa lớp đó ngay sau đó, vì vậy, anh ấy có thể không làm bất kỳ điều gì hiển thị.

Để tránh điều đó, bạn có thể áp dụng tính năng buộc vẽ lại hoặc làm cho tính toán của bạn không đồng bộ với WebWorkers hoặc setTimeout hoặc gì đó.