javascript, setInterval function starts counting not from 0

Question

I have noticed, that my setInterval function starts counting from 1, and sometimes even from 10. But if i increase the interval to some 20 seconds, it starts counting correctly from 0. Subsequent counting is correct - adds one in every step, but the initial cnt value, if i reduce to internval to some 5 seconds, becomes wrong.

var stepProt = function () {
        console.log('started stepProt constructor'); 
        this.step = 20; //seconds
        this.cnt = 0;   //init counter, pointer to rtArr
    }; 

    stepProt.prototype.countingFnc = function () {
        console.log('started stepFnc.prototype.countingFnc');
        var msec = this.step*1000;
        var that = this;
        that.cnt=0;
        this.nameToStop = window.setInterval( function () {
            that.stepFnc(); }, msec );
    } 

    stepProt.prototype.stepFnc = function() {

        console.log (' 132 startedFnc rtG.prototype.stepFnc, this.cnt='+this.cnt );  //if interval is 5seconds, this.cnt usually starts from 1, but sometimes from 10, instead of starting from 0. All other steps are correct, +1 each time.
       /* here there is some logics, which takes time */
        this.cnt++;
    }; 

    var stepIn = new stepProt(); //instance
    stepIn.stepFnc();

What could be the reason and how to resolve?

p.s. Actually, i use this function before window onload. Maybe this is the reason? I include many scripts before window.onload. Later i make single script for window.onload functionality.

I put

var stepIn = new stepFnc(); //instance
stepIn.stepFnc();

before window onload, because if i use it in window.onload, for some reason, other functions does not understand stepIn instance as a global variable accessable everythere. Maybe it is because i use php template.

Answer 1

Seems the reason is that i use setInterval in script not in window.onload, thus the first counter is wrong. I created function to check if javascript is loaded, and than i use boolen in setInterval to start counting only after the all javascript is loaded.

var loadIn - checks if javascript is loaded ,and sets loadIn.jsLoad =true. if(loadIn.jsLoad) { that.stepFnc(); }

Code checking if

javascript is loaded : this.jsLoad = true (mainly i need this),

html is loaded : this.htmlLoad= true,

both js and html are loaded: this.bLoaded =true

 console.log('loading check started' ); 

    var loadProt = function () {
        this.bLoaded = "";
        this.checkLoadInt="";
        this.jsLoadFnc="";
        this.bDomainCheckPass = false; //assumes that domain is wrong
        this.beforeunload = ""; //event

        this.jsLoad = false;
        this.htmlLoad = false;
        this.bLoaded =false;

    }; 

    loadProt.prototype.checkLoadFnc = function() {
        console.log('startedFnc checkLoadFnc');
        this.htmlLoad = false;
        this.jsLoad = false; 
        if(document.getElementById("bottomPreloadSpan")) { this.htmlLoad =true; }
        this.jsLoad = this.jsLoadFnc(); 
        console.log( 'htmlLoad='+this.htmlLoad +',  jsLoad=' +this.jsLoad ) ; 
        this.bLoaded = this.htmlLoad && this.jsLoad;
        if( this.bLoaded ) { 
            this.stopIntervalFnc(); 
        }
    };

    loadProt.prototype.stopIntervalFnc = function() {
        console.log('startedFnc stopIntervalFnc');
        document.getElementById("preloadSpan").style.visibility = "hidden";
        var preloadImg = document.getElementById('preloadImage');
        preloadImg.parentNode.removeChild(preloadImg);

        clearInterval(this.checkLoadInt);
        this.bDomainCheckPass = this.checkAllowedDomains(); // i do not give it here
        //this.evalStep(); 
        if(this.bDomainCheckPass) {
            console.log('ERROR right domain');
        } else {
            console.log('ERROR Wrong domain');
            //window.location.assign loads a new document - to login page, saying you was redirected .... 
        } 
    }  

    var loadIn = new loadProt(); 

    loadIn.checkLoadInt = window.setInterval( 
            function() { loadGIn.checkLoadFnc(); }, 1000 );  
    loadIn.jsLoadFnc = document.onreadystatechange = function () { return (document.readyState=='complete') ? true : false ; }

Counter function:

var stepProt = function () {
        console.log('started stepFnc constructor'); 
        this.step = 20; //seconds
        this.cnt = 0;   //init counter, pointer to rtArr
    }; 

stepProt.prototype.countingFnc = function () {
    console.log('started stepFnc.prototype.countingFnc');
    var msec = this.step*1000;
    var that = this;
    that.cnt=0;
    this.nameToStop = window.setInterval( function () {
             if(loadIn.jsLoad) { that.stepFnc(); }
        }, msec );
} 

stepProt.prototype.stepFnc = function() {

    console.log (' 132 started  stepFnc, this.cnt='+this.cnt );  
   /* here there is some logics, which takes time */
    this.cnt++;
}; 

var stepIn = new stepProt(); //instance
stepIn.countingFnc();

Answer 2

var stepFnc = function () {
        console.log('started stepFnc constructor'); 
        this.step = 1; //seconds
        this.cnt = 0;   //init counter, pointer to rtArr
}; 

stepFnc.prototype.countingFnc = function () {
        console.log('started stepFnc.prototype.countingFnc');
        var msec = this.step*1000;
        var that = this;
        that.cnt=0;
        this.nameToStop = window.setInterval( function () {
            that.stepFnc(); }, msec );
}; 

stepFnc.prototype.stepFnc = function() {

        console.log (' 132 startedFnc rtG.prototype.stepFnc, this.cnt='+this.cnt );  //if interval is 5seconds, this.cnt usually starts from 1, but sometimes from 10, instead of starting from 0. All other steps are correct, +1 each time.
       /* here there is some logics, which takes time */
        this.cnt++;
}; 

var stepIn = new stepFnc();
stepIn.countingFnc();

Answer 3

You should call stepIn.countingFnc(); to start the process. Another thing is that I'd change the name of the function stepFnc so it doesn't match with the constructor name for readability.

var stepFnc = function () {
    console.log('started stepFnc constructor');
    this.step = 20; //seconds
    this.cnt = 0;   //init counter, pointer to rtArr
};

stepFnc.prototype.countingFnc = function () {
    console.log('started stepFnc.prototype.countingFnc');
    var msec = this.step*1000;
    var that = this;
    that.cnt=0;
    this.nameToStop = setInterval( function () {
        that.triggerFnc(); }, msec );
}

stepFnc.prototype.triggerFnc = function() {

    console.log (' 132 startedFnc rtG.prototype.stepFnc, this.cnt='+this.cnt );  //if interval is 5seconds, this.cnt usually starts from 1, but sometimes from 10, instead of starting from 0. All other steps are correct, +1 each time.
    /* here there is some logics, which takes time */
    this.cnt++;
};

var stepIn = new stepFnc();
stepIn.countingFnc();

Hope this helps. ;)