메서드 호출에서 변수를 업데이트 루프

Question

나는 bullet.fire() 메서드를 호출하고 있습니다. 이 방법에서 나는 this.i ++, 유일한 문제는 this.i 모든 반복, 어떤 생각을 업데이 트하지 않는 이유는 무엇입니까? 루프에서

function projectile(){ 
    this.i = 20; 
} 

projectile.prototype.fire = function(){ 
    this.i++; 
    //shows value of this.i in a div 
    document.getElementById("info").innerHTML = this.i; 
} 

if(typeof(bullet) == "undefined"){ 
    var bullet = new projectile(1); 
} 

bullet.fire(); 

Answer 1

그것은 불을한다!

두 가지 이유로 진행 상황을 볼 수 없습니다. 첫째, 지연이 없으므로 즉각적으로 발생합니다. 둘째, 자바 스크립트는 하나의 동기 스레드에서 작동합니다. 인터페이스 (HTML)는 스레드가 완료 될 때까지 새로 고쳐지지 않습니다.

자바 스크립트 비동기 실행 메소드 중 하나를 사용하여 스레드를 중단 할 수 있습니다. 인스턴스의 setInterval :. 예상대로

<div id="info"></div> 
<script type="text/javascript"> 
function projectile(){ 
    this.i = 20; 
} 

projectile.prototype.fire = function(){ 
    this.i++; 
    //shows value of this.i in a div 
    document.getElementById("info").innerHTML = this.i; 
} 

var i = 3, bullet = new projectile(1), timer; 

timer = setInterval(function() { 
    bullet.fire(); 
    if (--i <= 0) clearInterval(timer); 
}, 300); 
</script> 

In action on fiddle