我正在开发一个网页,它使用<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下),所以它与一个特定的引擎无关。