javascript - JS OOP - 由对象创建多个计时器，但只有一个有效

Question

这个js是创建“lyricLine”并在页面的随机位置显示字符串。

在创建oLyricLine对象并调用drawText时，它应该逐一显示数组lyricLines中的每个字符串，直到最后一行显示。当最后一行超时时，计时器应该停止，并且创建的 div.lyricline 应该被删除。

创建不同的对象时(在本例中为 LyricGen1 和 LyricGen2)，它们的计时器应同时计时。

但目前只有 LyricGen2 的计时器正在工作。

代码附在下面。

<script src="jquery-min.js"></script>
<div id="container">
    <div class="lyricline" id="0">
        demo
    </div>
</div>
<style>
    body{
        background: #000;
        color: #fff;
        font-family: sans-serif;
    }
    #container{
        position: relative;
        width: 100%;
        height: 100%;
    }
    .lyricline{
        position: absolute;
        text-align: center;
    }
</style>
<script>
var idarray = [];
//Object oLyricLine
function oLyricLine(obj){
    this.lyricLines = [];
    this.textSize = 30;
    this.toppx = -1;
    this.leftpx = -1;
    this.unixtime = -1;
    this.widthpx = -1;
    this.colorhex = "#fff";
    this.obj = obj;
}
oLyricLine.prototype.drawText = function(){
    if (this.toppx != -1 && this.leftpx != -1 && this.unixtime != -1 && this.widthpx != -1){


    var transitionInTime = 10;
    var transitionOutTime = 10;
    var tickfactor = 5;
    $("#"+this.unixtime).css({
        "color": this.colorhex,
        "left": this.leftpx,
        "top": this.toppx,
        "width": this.widthpx,
        "font-size":this.textSize
    }).attr({"class":"lyricline","id":this.unixtime}).text(this.lyricLines[0]);
    var tickCount = 0;
    lyricLinesCount = 0;
    var lyricLinesTick = [];
    for (var i =0; i <= this.lyricLines.length - 1; i++) {
        lyricLinesTick[i] = this.lyricLines[i].length * tickfactor;
        if(i>0){lyricLinesTick[i]+=lyricLinesTick[i-1];}
    };
    var nLyricLines = this.lyricLines;
    var nUnixtime = this.unixtime;
    idarray[nUnixtime] = setInterval(function () {
        tickCount += 1;
        if (tickCount == lyricLinesTick[lyricLinesCount]){
            lyricLinesCount +=1;
            if(lyricLinesCount != lyricLinesTick.length){
                $("#"+nUnixtime).text(nLyricLines[lyricLinesCount]);
            }else{
                $("#"+nUnixtime).remove();
                clearInterval(idarray[nUnixtime]);
            }
        }
    },100);


    }
};
oLyricLine.prototype.widthGen = function() {
    this.widthpx = maxWidth(this.lyricLines, this.textSize);
};

var unixtime1=Date.now();
$("#container").append($("<div></div>").attr("id",unixtime1));
var obj1=$("#"+unixtime1);
var LyricGen1 = new oLyricLine(obj1);
LyricGen1.lyricLines = ["gen1 line1","1.line2","1-------LINE#3"];
LyricGen1.textSize = 50;
LyricGen1.toppx = Math.floor(Math.random()*($(window).height()-LyricGen1.textSize));
LyricGen1.widthGen();
LyricGen1.leftpx = Math.floor(Math.random()*($(window).width()-parseInt(LyricGen1.widthpx)));
LyricGen1.unixtime = unixtime1;
LyricGen1.drawText();

$("#container").append($("<div></div>").attr("id","Datenow"));
var obj2=$("#Datenow");
var LyricGen2 = new oLyricLine(obj2);
LyricGen2.lyricLines = ["2.1","TWO=two","2........3","gen2 line number 4","2>>line5"];
LyricGen2.textSize = 80;
LyricGen2.toppx = Math.floor(Math.random()*($(window).height()-LyricGen1.textSize));
LyricGen2.widthGen();
LyricGen2.leftpx = Math.floor(Math.random()*($(window).width()-parseInt(LyricGen1.widthpx)));
LyricGen2.unixtime = "Datenow";
LyricGen2.drawText();

function strlen(str){ var len = 0; for (var i=0; i<str.length; i++) { var c = str.charCodeAt(i); if ((c >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f)) { len++; } else { len+=2; } } return len; }

function maxWidth (lyricLines, textSize) {
    var maxStringLength=0, maxStringId=-1;
    for (var i = lyricLines.length - 1; i >= 0; i--) {
            if (maxStringLength < strlen(lyricLines[i])){
            maxStringLength = strlen(lyricLines[i]);
            maxStringId = i;
        };
    };
    $("#container").append($("<div></div>").css({
        "background":"#fff",
        "color":"#000",
        "visibility":"hidden",
        "font-size":textSize
    }).attr({"class":"lyricline","id":"widgen"}).text(lyricLines[maxStringId]));
    var maxPxLength =  $("#widgen").css("width"); 
    $("#widgen").remove();
    return maxPxLength;
}
</script>

Answer 1

lyricLinesCount = 0;

这里缺少一个var，使得lyricLinesCount成为implicit global多变的。不过，您希望将其放在每个计时器本地。