ブラウザの再描画を強制し、UI更新の遅延を回避するにはどうすればよいですか？

Question

ロング（er）操作が行われる前にブラウザを使用して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のdisplayプロパティの読み取りが再描画するためにブラウザを強制することが示唆されたが、遅延は依然として発生しました：ため

$('#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を呼び出したスレッドが終了するまで機能やコードスニペットが が実行できないことに注意することが重要です。