Javascript 带有p5.js和js的文本动画

我有下面的代码，它使用p5.js库的一些部分以淡入淡出的方式（保持不精确的循环）设置一些文本的动画，我还插入了一个图像以使事情更清楚

问题是，在第一次循环完成后（当整个文本出现然后开始消失时），我的浏览器出现了严重的延迟，尽管它仍然可以正常工作并保持循环。我不确定我的代码中是否有一个错误导致计算失败，或者它是否太重以至于浏览器无法运行

我所有的VAR都是不言自明的，但如果你有任何问题或需要我的脚本的另一部分，一定要问我

有什么想法可以帮我的案子吗？多谢各位

//淡入淡出动画/w循环
如果（（animType==“淡入”）&&（animeLoop==true））{
如果（animDirection==true）{
对于（i=0；i50）{charsOpacity[i][j]=charsOpacity[i][j]+速度；}
}
else{animDirection=false；}
}
}
}
否则{
对于（i=0；i0））{charsOpacity[i][j]=charsOpacity[i][j]-speed；}
else如果（（j==0）和&（i！=0））{
temp=字符容量[i-1]。长度；
如果（（charsOpacity[i-1][temp-1]<200）和&（charsOpacity[i][j]>0））{charsOpacity[i][j]=charsOpacity[i][j]-speed；}
}
else如果（charsOpacity[i][j-1]<200{charsOpacity[i][j]=charsOpacity[i][j]-speed；}
}
else{animDirection=true；}
}
}
}
}

好的，经过大量的尝试和错误后，我发现了问题，我在sencond else if语句中丢失了一个检查，数组接收的值远远大于255的范围（这是setAlpha（）函数的上限）这一定造成了严重的延迟，因为它必须不断添加所有这些值，并可能在其自身函数中重新计算alpha值

我还计划添加一些额外的语句，以将charsCapity数组中的值限制在0-255之间，尽管没有它也可以。您应该将此答案标记为正确，这样问题就不会显示出来我的名声还不到15岁，所以我必须等48小时才能做出自己的回答

//FADE animation /w Loop
    if ((animType == "FADE") && (animeLoop == true)) {
        if (animDirection == true) {
            for (i=0; i<userText.length; i++) {
                word = userText[i].html();
                posXcalc = 0;
                for (j=0; j<word.length; j++) {
                    textColor.setAlpha(charsOpacity[i][j]);
                    fill(textColor);
                    textSize(userSize);
                    text(word[j], userPosX + posXcalc, userPosY + (i * (userSize + userLeading)));
                    posXcalc = posXcalc + textWidth(word[j]);
                    if (charsOpacity[charsOpacity.length-1][charsOpacity[charsOpacity.length-1].length-1] < 255) {
                        //console.log("going");
                        if ((i == 0) && (j == 0) && (charsOpacity[i][j] < 255)) {charsOpacity[i][j] = charsOpacity[i][j] + speed;}
                        else if ((j == 0) && (i != 0)) {
                            temp = charsOpacity[i-1].length;
                            if ((charsOpacity[i-1][temp-1] > 50) && (charsOpacity[i][j] < 255)) {charsOpacity[i][j] = charsOpacity[i][j] + speed;}
                        }
                        else if (charsOpacity[i][j-1] > 50) {charsOpacity[i][j] = charsOpacity[i][j] + speed;}
                    }
                    else {animDirection = false;}
                }
            }
        }
        else {
            for (i=0; i<userText.length; i++) {
                word = userText[i].html();
                posXcalc = 0;
                for (j=0; j<word.length; j++) {
                    textColor.setAlpha(charsOpacity[i][j]);
                    fill(textColor);
                    textSize(userSize);
                    text(word[j], userPosX + posXcalc, userPosY + (i * (userSize + userLeading)));
                    posXcalc = posXcalc + textWidth(word[j]);
                    if (charsOpacity[charsOpacity.length-1][charsOpacity[charsOpacity.length-1].length-1] > 0) {
                        console.log("going");
                        if ((i == 0) && (j == 0) && (charsOpacity[i][j] > 0)) {charsOpacity[i][j] = charsOpacity[i][j] - speed;}
                        else if ((j == 0) && (i != 0)) {
                            temp = charsOpacity[i-1].length;
                            if ((charsOpacity[i-1][temp-1] < 200) && (charsOpacity[i][j] > 0)) {charsOpacity[i][j] = charsOpacity[i][j] - speed;}
                        }
                        else if (charsOpacity[i][j-1] < 200) {charsOpacity[i][j] = charsOpacity[i][j] - speed;}
                    }
                    else {animDirection = true;}
                }
            }
        }
    }