Question

我制作了一块156X64 div的3个像素，每个像素都有边框半径，所以它看起来就像是一块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函数开始，我注意到的第一件事是你每10ms运行一点代码。为什么我们不查看正在运行的内容？

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。

在JavaScript中非常滞后的动画

1 个答案: