Принудительное обновление DOM в Internet Explorer после манипуляции с javascript dom

Вот ситуация. У меня есть javascript, который выглядит так:

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

Когда я делаю это действие отправки формы и запускаю его из браузера не IE, он быстро меняет видимость двух интервалов и запускает длительную операцию javascript. Если я делаю это в IE, он не выполняет своп до тех пор, пока функция onSubmit() не вернется полностью.

Я могу заставить перерисовать dom, прикрепляя окно предупреждения так:

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

Кроме того, очевидный рефакторинг jquery не влияет на поведение IE:

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

Такое поведение существует в IE8 и IE6. Есть ли способ заставить перерисовать DOM в этих браузерах?

Ответ 1

Может ли ваша longRunningOperation быть вызвана асинхронно?

Ответ 2

Mozilla (возможно, IE также) будет кэшировать/задерживать выполнение изменений в DOM, которые влияют на отображение, так что он может вычислять все изменения одновременно, а не повторно после каждого утверждения.

Чтобы принудительно выполнить обновление (для принудительного немедленного, синхронного пересчета или ретрансляции), ваш javascript должен прочитать свойство, которое повлияло на изменение, например. расположение someSpan и otherSpan.

(Эта деталь реализации Mozilla упоминается в видео Более быстрый HTML и CSS: внутренние интерфейсы компоновщика для веб-разработчиков.)

Ответ 3

Чтобы продолжить, что говорит ChrisW:

здесь очистка script до Flash DOM, поэтому вам не нужно вызывать предупреждение ( "); (найдено в 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;
   }
}

Он работает для меня! Спасибо за подсказку.

Ответ 4

У меня была эта проблема в Chrome 21, которая перетаскивала слово с буквой с descender ('g'). Это оставило следы пыли мотыльки на экране, которая исчезла бы в следующий раз, когда что-то заставило экран обновиться. Решение ChrisW (опрос макета-чувствительного свойства) не работает.

Что делалось, чтобы добавить 1-пиксельный пустой div в верхней части страницы, а затем удалить его через миллисекунду позже, вызвав следующую функцию в конце операции перетаскивания:

// 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);
}

Примечание: вам нужна задержка. Простое добавление и удаление div не работает. Кроме того, элемент div необходимо добавить над частью страницы, которая должна быть перерисована.

Ответ 5

Вы также можете обернуть долговременную функцию в setTimeout (function() {longTerm();}, 1);

Ответ 6

element.focus() работает для меня в 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";
}