重计算前刷新DIV

Refresh DIV before heavy computation

本文关键字：DIV 刷新 计算      更新时间：2023-09-26

这一直困扰着我，虽然有很多"用jQuery刷新div"的问题在那里，没有地址(还没有找到它，也就是说)这个简单的问题:我如何刷新(视觉方面)一个div做一些繁重的计算之前?这个想法很简单，我正在用D3创建一个大图表，需要几秒钟才能生成，我希望能够在计算之前在覆盖中放置一个动画gif，然后将其删除。例如:

$("#test").empty();
$("#test").text("Should be seen while waiting");
for (var i=1;i<2000000000;i++) {
    //Draw heavy SVG in #test that takes time
}
$("#test").empty();
$("#test").text("Ready");
$("#test").css("color", "red");

很简单，但到目前为止我还没能做到:"等待时应该看到"从来没有出现过:(

这里用一个简单的Fiddle演示了这个行为:http://jsfiddle.net/StephMatte/q29Gy/

我尝试使用setTimeout和jQuery的。delay()在3个不同的浏览器，但无济于事。

试试这个-

box = $("<div>", {'id': 'box'});
$("#test").append(box);
$("#box").text("Should be seen while waiting");
for (var i=1;i<2000000000;i++) {
//Draw heavy SVG in #test that takes time
}
$("#box").remove();
$("#test").text("Ready");
$("#test").css("color", "red");`

原来我只是使用了错误的语法setTimeout()。

成功了:

$("#test").text("Is seen while generating heavy SVG");
setTimeout(function(){build_chart();}, 100);
$("#test").empty();

10ms是不够的，但是100ms足以让DIV在进行繁重的计算之前显示它的新内容。

相关文章：