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

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

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

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

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

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

Answer 1

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

$('#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(), не завершится.