Как заставить браузер перекрасить и избежать задержки обновления пользовательского интерфейса?

Question

Мне нужен браузер для обновления моего интерфейса перед выполнением длительной (er) операции. В настоящее время браузер ждет, пока все не будет завершено, а затем обновит пользовательский интерфейс, что означает, что пользовательский интерфейс зависает на 1-2 секунды, а затем обновляет.

Таким образом, пользователь нажимает кнопку нажмет в интерфейсе, то этот код выполняется:

$('#mybutton').click(function(e) { 

e.preventDefault();// prevent the default anchor functionality 

$('#mainctrldiv').css('display', 'none'); 
$('#otherctrldiv').css('display', 'block'); 

var img = $('<img id="spareimg" style="display:none;">'); 
img.attr('src', canvas.getActiveObject().toDataURL()); // This is causing the delay! 
img.appendTo('body'); 
} 

Это (функция FabricJS) canvas.getActiveObject().toDataURL(), что нашли время. Я хочу, чтобы это произошло после того, как 2 div были явно отображены пользователю, и они этого не замечают. Вам нужно, чтобы это работало во всех широко используемых браузерах! (как мобильный, так и рабочий стол).

исследований предположили, что чтение свойства отображения CSS сразу после установки их заставит браузер перекрашивать, поэтому я добавил следующий код сразу после установки этих свойств, но задержка еще произошло:

$('#mainctrldiv').css('display'); 
$('#otherctrldiv').css('display'); 

Большое спасибо за какие-либо предложения!

Answer 1

Пробуйте использовать setTimeout с zero delay, он будет толкать их до конца нити. Вы также можете попробовать добавить некоторую задержку, если нулевая задержка не работает для вас. Но я не уверен, что эта точная строка вызывает проблему, если это Опубликовать еще один вопрос о том, как оптимизировать и уменьшить время.

$('#mybutton').click(function(e) { 
    e.preventDefault(); // prevent the default anchor functionality 
    $('#mainctrldiv').css('display', 'none'); 
    $('#otherctrldiv').css('display', 'block'); 
    setTimeout(function() { 
    var img = $('<img id="spareimg" style="display:none;">'); 
    img.attr('src', canvas.getActiveObject().toDataURL()); // This is causing the delay! 
    img.appendTo('body'); 
    }, 0); 
} 

Важно отметить, что функция или фрагмент кода не может быть выполняется до потока, который называется SetTimeout() окончилась.