JavaScript数组对象振荡空虚

Question

我正在使用画布绘制的网站。 为了使用动画，画布每40毫秒重绘一次，基本上是25 fps。

刷新重新绘制存储在this.elements中的所有画布元素，这是一个初始化为空的数组。

使用this.elements将元素添加到this.elements.push(elem)。

重绘计时器设置如下（混合常量）：

setInterval(function(){
    redraw();
}, 40);

redraw()执行以下操作：

redraw = function () {
    var ctx = this.getContext(); // canvas element with 2d graphics context
    ctx.clearRect(0, 0, this.getWidth(), this.getHeight());
    for(var i = 0; i < this.elements.length; i++){
        // draw the element
    }
}

绘图按预期工作 - 问题是this.elements在包含所有元素和空白之间振荡 - 特别是前者中的1个，后者中的2个。

在画布中添加了54个元素时，在console.log(this.elements.length)函数中放置redraw()会得到以下输出：

这种振荡有时会在画布上产生频闪效果。

是什么导致阵列在空虚之间振荡？

Answer 1

同一个画布上有三个相同图形模块的实例。由于elements在三者之间是不同的，因此画布正在频闪。