Question

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

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

<div *ngFor="#item of items; #lastElement = last">
   // Items go here
</div>

花费时间的$('#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函数）。我希望在将2个div显示给用户之后发生这种情况，他们没有注意到。需要这个在所有常用的浏览器中工作！（移动和桌面）。

研究表明，在设置后立即读取css显示属性会强制浏览器重新绘制，所以我在设置这些属性后直接添加了以下代码，但延迟仍然发生：

canvas.getActiveObject().toDataURL()

非常感谢任何建议！

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（）的线程终止。

如何强制浏览器重绘并避免UI更新延迟？

1 个答案: