javascript - 如何强制浏览器重绘图像？

Question

我正在开发一个涉及扔雪球的 JavaScript 游戏。我需要雪球在其飞行路径中尽可能频繁地渲染。 Chrome 会执行所有计算，包括设置 style.left 和 style.top 属性，但实际上不会重绘雪球，直到它到达目的地。 Opera 没有这个问题。

相关的一点是，在 renderSnowball() 之后添加 alert() 可以解决问题，但使用alert() 是一个明显的问题。

这是我到目前为止的代码:

function throwSnowball()
{
    var theta = parseFloat(angleField.value) *    Math.PI/180 ;
    var Vir = parseFloat(velocityField.value) ;

    if (!isNaN(Vir) && !isNaN(theta) )
    {

    Vix = Math.cos(theta) * Vir * 50;
    Viy = Math.sin(theta) * Vir * 50;   

time = new Date() ;
var timeThrown = time.getTime() ;

    while (snowballPosY > 0)
    {
        current = new Date() ;
        var currentTime = current.getTime() ;

        var timeElapsed = (currentTime - timeThrown)/5000 ;
        snowballPosX += Vix * timeElapsed;
        snowballPosY += Viy * timeElapsed;
        Viy -= GRAVITY * timeElapsed ;
        renderSnowball() ;      //renderSnowball() sets the style.left
                 // and style.top properties to snowballPosX pixels 
                 // and snowballPosY pixels respectively                        
        timeThrown = currentTime ;
    }

    snowballPosX = 0 ;
    snowballPosY = 50 ;
    renderSnowball() ;
    }
}

Answer 1

你完全阻塞了主线程。您是否尝试过使用 setTimeout(即使超时为零)来允许动画期间发生其他事情？

如果您愿意使用实验技术，requestAnimationFrame会更好。

编辑:setTimeout 方法看起来像这样(替换 while 循环):

var drawAndWait = function() {
  if (snowballPosY > 0) {
    // movement/drawing code here
    setTimeout(drawAndWait, 20 /* milliseconds */);
  } else {
    // reset code that would normally go after your while loop
  }
};
drawAndWait();

因此，每次绘制完成时，它都会在适当的情况下安排再次调用自己。请注意，您的 throwSnowball 函数将快速返回； throw 直到稍后才真正完成。这需要一段时间才能习惯正确的做法；如果一开始不直观，请不要太担心。