JS OOP - multiple timer created by object but only one works

Question

This js is to create "lyricLine" and showing strings on random position of the page.

While creating an object of oLyricLine and calling drawText, it supposed to display each string of array lyricLines one by one until last line is shown. When last line is time-out, the timer should stop and the created div.lyricline should be deleted.

While different objects are created, (in this case LyricGen1 and LyricGen2) their timer should be ticking simultaneously.

But currently only timer of LyricGen2 is working.

Code is attached below.

<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;

You're missing a var here, making lyricLinesCount an implicit global variable. You want to have it local to each timer, though.