javascript，setInterval函數從0開始計數

Question

我注意到，我的setInterval函數從1開始計數，有時甚至從10開始計數。但是如果我將間隔增加到大約20秒，它將從0開始正確計數。隨後計數是正確的 - 在每一步中增加一個，但最初的cnt值，如果我減少到約5秒的內部錯誤，就會出錯。

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

可能是什麼原因以及如何解決？

p.s.其實，我在window onload之前使用這個函數。也許這是原因？ 我在window.onload之前包含了很多腳本。 後來我爲window.onload功能製作了單個腳本。

我把

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

窗口的onload之前，因爲如果我在window.onload使用它，因爲某些原因，其它功能並不瞭解stepIn實例作爲一個全局變量accessable everythere。也許這是因爲我使用php模板。

Answer 1

您應該致電stepIn.countingFnc();開始該過程。另一件事是，我會改變函數stepFnc的名稱，以便與可讀性的構造函數名稱不匹配。

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

希望這會有所幫助。 ）

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

似乎其原因是i的腳本在window.onload使用setInterval沒有，從而第一計數器是錯誤的。我創建了函數來檢查javascript是否加載，並且比我使用boolean在setInterval之後纔開始計數，只有在加載完所有JavaScript之後。

var loadIn - 檢查是否加載了javascript，並設置loadIn.jsLoad = true。 if（loadIn.jsLoad）{that.stepFnc（）; }

碼檢查，如果

JavaScript是加載：this.jsLoad =真（主要是我需要此），

HTML加載：this.htmlLoad =真，

二者JS和HTML加載：this.bLoaded =真

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

計數器功能：

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