javascript - javascript 中的动画非常滞后

Question

我制作了一 block 156X64 div 3 像素的板，每个像素有边框半径，所以它看起来像一 block LED 板。我有代表每个 7X5 字母矩阵中的 0 或 1 的字符串。

var lgeoa="00100001000001000001100011000101110";//7X5 matrix letter A
var lgeob="10000111000010001010100011000101110";//7X5 matrix letter B
and so on...

绘制字母表示改变对应div的背景颜色。它工作正常，但之后我想让它们动起来，问题就开始了。我每 10 毫秒清除一次线条并绘制一次，但它非常非常滞后。那么请问如何优化此代码以使其不出现延迟？ 附:令人惊讶的是，它在 IE11 中比在 Chrome 中运行得更好。

Here is a fiddle

Answer 1

这里可以进行很多优化。我会指出一些。

从 animate 函数开始，我注意到的第一件事是每 10 毫秒运行一些代码。我们为什么不检查一下正在运行的内容？

function animate() {
    var string = "აბგდევზთიკლმნოპჟრსტუფქღყშჩცძწჭხჯჰ ტესტ ტესტ აი ემ ე თეიბლ ტექსტი იწერება აქ"; //string to animate
    position = 150; //initial position of string
    window.setInterval(function () {
        clearLine(0);
        drawOnBoard(string, position, 0);
        position = position - 1;
    }, 10);
}

Clearline 是第一个功能。

function clearLine(n){
    for(var i=n*symbolHeight*lineWidth+n*lineWidth;i<(n+1)*symbolHeight*lineWidth+n*lineWidth;i++)
        leds[i].style.backgroundColor="black";
}

for 循环中有点困惑。我的理解是，未编译的代码将为每次迭代运行所有数学运算。因此，让我们将其移出 for 循环。

function clearLine(n) {
    var initial = n * symbolHeight * lineWidth + n * lineWidth;
    var length = (n + 1) * symbolHeight * lineWidth + n * lineWidth;
    for (var i = initial; i < length; i++)
    leds[i].style.backgroundColor = "black";
}

啊，但还有更多工作要做。我发现这两个方程有很多共同的数学内容。

function clearLine(n) {
    var whateverThisIs = symbolHeight * lineWidth + n * lineWidth;
    var initial = n * whateverThisIs;
    var length = (n + 1) * whateverThisIs;
    for (var i = initial; i < length; i++)
    leds[i].style.backgroundColor = "black";
}

我看到您正在继续前进，所以我现在将停止处理此问题。还有很多需要优化的地方。

这是一个fiddle的更新版本。