停止JavaScript計數器，一旦達到指定的格數

Question

我使用的代碼來自JSFiddle在我的網站上實現向上計數功能。我喜歡它，因爲它允許我定位顯示在特定div中的數字，而且我不需要在JavaScript中指定該數字，這意味着我可以在任何頁面上爲我選擇的任何數字使用它。

在這裏看到的代碼：

// basic class implementation 
function myCounter() { 
    // privileged property for iteration 
    this.i = 0; 

    // privileged init method 
    this.init(); 
} 

// defining init method 
myCounter.prototype.init = function() { 
    // reassign this 
    var _this = this; 

    setInterval(function() { 
     // call this.countUp() using our new created variable. 
     // this has to be done as this would normally call something 
     // inside this function, so we have to pass it as own 
     // variable over 
     _this.countUp(); 
    }, 500); 

    clearInterval(function() { 
     this.i == 
    }; 
}; 

// defining the counter method 
myCounter.prototype.countUp = function() { 
    this.i++; 
    document.getElementById('counter').innerHTML = this.i; 
}; 

// create a new instance of our counter class 
var counter = new myCounter(); 

唯一的問題是，它不會停止計數。我很想爲自己添加一些代碼，除了我對JavaScript不夠熟悉並且不知道從哪裏開始。

有沒有辦法讓javascript停止計數在目標div中指定的數量？

非常感謝！

Answer 1

// basic class implementation 
function myCounter() { 
    // privileged property for iteration 
    this.i = 0; 

    // privileged init method 
    this.init(); 
} 

// defining init method 
myCounter.prototype.init = function() { 
    // reassign this 
    var _this = this; 
    this.timer = setInterval(function() { 
     // call this.countUp() using our new created variable. 
     // this has to be done as this would normally call something 
     // inside this function, so we have to pass it as own 
     // variable over 
     _this.countUp(); 
    }, 500); 
}; 

// defining the counter method 
myCounter.prototype.countUp = function() { 
    this.i++; 
    document.getElementById('counter').innerHTML = this.i; 

    // stop the timer 
    if(this.i == 8){ 
     clearInterval(this.timer) 
    } 
}; 

// create a new instance of our counter class 
var counter = new myCounter();