0

我需要浏览器在长时间（呃）操作完成之前更新我的 UI。目前浏览器正在等待一切完成后再更新 UI，这意味着 UI 冻结 1-2 秒然后更新。

因此，用户单击 UI 中的按钮，然后执行此代码：

$('#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');

非常感谢您的任何建议！

4

1 回答 1

6

尝试使用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() 的线程终止之前，无法执行函数或代码片段。

于 2016-04-11T17:12:09.963 回答