Bắt buộc làm mới DOM trong trình khám phá Internet sau khi thao tác với javascript dom

Question

Đây là tình huống. Tôi có một số javascript trông như thế này:

function onSubmit() { 
    doSomeStuff(); 
    someSpan.style.display="block"; 
    otherSpan.style.display="none"; 
    return doLongRunningOperation; 
} 

Khi tôi làm cho một hình thức nộp hành động, và chạy nó từ một trình duyệt không phải IE, nó nhanh chóng hoán đổi khả năng hiển thị hai nhịp và chạy các hoạt động javascript dài. Nếu tôi làm điều này trong IE, nó sẽ không thực hiện hoán đổi cho đến khi onSubmit() trả về hoàn toàn.

tôi có thể buộc một dom vẽ lại bằng cách dán một hộp cảnh báo trong như vậy:

function onSubmit() { 
    doSomeStuff(); 
    someSpan.style.display="block"; 
    otherSpan.style.display="none"; 
    alert("refresh forced"); 
    return doLongRunningOperation; 
} 

Ngoài ra, jquery refactoring rõ ràng không ảnh hưởng đến hành vi của IE:

function onSubmit() { 
    doSomeStuff(); 
    $("#someSpan").show(); 
    $("#otherSpan").hide(); 
    return doLongRunningOperation; 
} 

Hành vi này tồn tại trên IE8 và IE6. Có anyway để buộc vẽ lại DOM trong các trình duyệt này không?

Answer 1

longRunningOperation của bạn có thể được gọi là không đồng bộ?

Answer 2

Mozilla (có thể là IE) sẽ cache/trì hoãn thực hiện thay đổi đối với DOM ảnh hưởng đến hiển thị, để nó có thể tính toán tất cả thay đổi cùng một lúc thay vì lặp đi lặp lại sau mỗi câu lệnh.

Để bắt buộc cập nhật (để buộc chỉnh lại hoặc chuyển tiếp đồng bộ ngay lập tức), javascript của bạn nên đọc thuộc tính bị ảnh hưởng bởi thay đổi, ví dụ: vị trí của someSpan và otherSpan.

(chi tiết thi hành Mozilla này được đề cập trong đoạn video Faster HTML and CSS: Layout Engine Internals for Web Developers.)

Answer 3

Bạn cũng có thể bọc hàm dài hạn trong một hàm setTimeout (function() {longTerm();}, 1);

Answer 4

Để tiếp tục những gì ChrisW nói:

đây là tập lệnh khởi động cho flash DOM, vì vậy bạn không phải gọi cảnh báo (""); (Tìm thấy tại http://amolnw.wordpress.com/category/programming/javascript/):

function flushThis(id){ 
    var msie = 'Microsoft Internet Explorer'; 
    var tmp = 0; 
    var elementOnShow = document.getElementById(id); 
    if (navigator.appName == msie){ 
     tmp = elementOnShow.parentNode.offsetTop + 'px'; 
    }else{ 
     tmp = elementOnShow.offsetTop; 
    } 
} 

Nó làm việc cho tôi !!! Cảm ơn mẹo.

Answer 5

Tôi gặp sự cố này trong Chrome 21 kéo một từ có chữ cái có dấu ('g'). Nó để lại một vệt bụi sâu phía sau trên màn hình, thứ sẽ biến mất vào lần sau khi có thứ gì đó làm cho màn hình trở nên tươi mới. Giải pháp của ChrisW (thẩm vấn một thuộc tính nhạy cảm với bố cục) không hoạt động.

gì đã làm công việc là để thêm một 1-pixel div trống ở phía trên cùng của trang, sau đó loại bỏ nó một phần nghìn giây sau, bằng cách gọi sau chức năng ở phần cuối của các hoạt động kéo:

// Needed by Chrome, as of Release 21. Triggers a screen refresh, removing drag garbage. 
function cleanDisplay() { 
    var c = document.createElement('div'); 
    c.innerHTML = 'x'; 
    c.style.visibility = 'hidden'; 
    c.style.height = '1px'; 
    document.body.insertBefore(c, document.body.firstChild); 
    window.setTimeout(function() {document.body.removeChild(c)}, 1); 
} 

Lưu ý: Bạn cần sự chậm trễ. Chỉ cần thêm và xóa div không hoạt động. Ngoài ra, cần thêmphía trên phần của trang cần vẽ lại.

Answer 6

element.focus() làm việc cho tôi trong IE10

function displayOnOff(){ 
    var elm = document.getElementById("myDiv"); 
    elm.style.display="block"; 
    elm.focus(); 
    for(var i=0; i<1000000; i++){ 
     console.log("waiting..............."); 
    } 
    elm.style.display = "none"; 
}