javascript css和canvas命令的相对时间

时间:2015-12-09 09:50:30

标签: javascript jquery css canvas

我正在开发一个网页,它使用<canvas>个元素和javascript来绘制它们(可视化数据,所以我不能轻易地设置一个jsfiddle)。用户可以与绘图进行交互,但由于数据集的大小,有时画布可能需要1-2秒才能重绘。所以我想给用户一些视觉线索,说明事情正在发生。原则上,我认为这很容易,我有这样的事情:

$('#myCanvas').css('opacity',0.5);
$('#myWorkingAnimatedGif').css('display','block');
updateMyCanvas();

updateMyCanvas()电话看起来像这样

function updateMyCanvas()
{
   // loop through data, drawing via paths
   // takes 1-2 sec to run on big datasets
   // no asynchronous calls, just for loops
   $('#myCanvas').css('opacity',1);
   $('#myWorkingAnimatedGif').css('display','none');
}

即。绘制数据,然后删除“我正在工作”的视觉线索。

然而,这不起作用;相反,用户点击重新绘制,1-2秒没有任何反应,然后重新绘制数据。即,在绘制画布之前,浏览器不会实现css命令,此时它会命中css命令以撤消这些更改。事实上,如果我编辑updateMyCanvas()以便它不会将CSS恢复到原来的状态,那么当用户点击时,没有任何事情发生1-2秒,然后数据重新绘制并且大致同时,不透明度会发生变化,动画的GIF出现了。

另一方面,如果我改为做以下事情:

$('#myCanvas').css('opacity',0.5);
$('#myWorkingAnimatedGif').css('display','block');
window.setTimeout(function(){updateMyCanvas();}, 10);

它运行正常,即使10ms超时大约是updateMyCanvas()运行所需时间的1%。

有谁知道这是为什么?就好像javascript引擎只是在完成所有画布绘制之后才处理我的jquery css操作。我在firefox和Chrome上试过这个(都在Linux下),所以它与一个特定的引擎无关。

0 个答案:

没有答案