javascript 클래스에서 반복적으로 setTimeout 호출

Question

내 프로그램에 다음 코드 행이 있습니다. javascript 클래스에서 setTimeout을 구현하고 싶습니다. 나는 "this"를 저장하려고 시도했지만 나에게 도움이되지 않는 것 같습니다. 이 클래스 로직은 입력이 0이면 출력 0을 표시하지만 입력이 1이면 이미 지정된 타이머를 시작하고 타이머가 끝난 후 출력에 ondelay 타이머를 제공합니다.

ONDClass = function(){ 
    this.id; 
    this.input; 
    this.source; 
    this.target; 
    this.timer; 
     var timerValue; 
     this.TimerID; 
     this.TotalSeconds; 
     var thisObj = this; 
     var c = 0; 
     this.setID = function(id){ 
       this.id = id; 
       timerValue = this.id + "C"; 
     } 

     this.getID = function(){ 
       return this.id; 
     } 

     this.setTimer = function(timer){ 
       this.timer = timer 
     } 

     this.getTimer = function(timer){ 
       return this.timer; 
     } 

    this.UIelementTaget = function(target){ 
     this.target = target; 
    } 

     this.UIelementSource = function(source){ 
     this.source = source; 
    } 

    this.setInput = function(input){ 
     this.input = input; 
    } 

    this.getInput = function(){ 
     return this.input 
    } 

     this.UpdateTimer = function(){ 
      console.log(c); 
      document.getElementById(timerValue).innerHTML = c; 
     } 

     this.createTimer = function(timerValue,time){ 
       this.TimerID = document.getElementById(timerValue); 
       this.TotalSeconds = time; 
      // this.UpdateTimer(); 

       setTimeout(function() { 
        document.getElementById(timerValue).innerHTML = c; 
        console.log(c); 
        thisObj.Tick(); 
       }, 1000) 
     } 

     this.Tick = function(){ 
       c++ 
       //this.UpdateTimer(); 

       if(c < this.TotalSeconds){ 
        setTimeout(function() { 
           document.getElementById(timerValue).innerHTML = c; 
           console.log(c); 
           thisObj.Tick(); 
          }, 1000) 
       } else { 
        return this.input; 
       } 
     } 


     this.getOutput = function(){ 
       if(this.input == 0){ 
        var htmltimer = "<div id = " + timerValue + " class = 'timerValue'>" + this.getTimer() + "</div>"; 
        $("#" + this.id).append(htmltimer); 
        return this.input; 
       } else { 
        var htmltimer = "<div id = " + timerValue + " class = 'timerValue'></div>"; 
        $("#" + this.id).append(htmltimer); 
        this.createTimer(timerValue,this.getTimer()); 
        return this.input; 
       } 
    } 

     this.getUISourceElement = function(){ 
       if(this.source == undefined) 
        return false; 
       else 
        return true; 
     } 

     this.addExtraDiv = function(){ 
     var divinput = this.id +"I"; 
       var divoutput = this.id +"O"; 
       var htmlinput = "<div id = " + divinput + " class = 'inputBoxTimer'>" + this.getInput()+ "</div>"; 
       var htmloutput = "<div id = '" + divoutput + "' class = 'outputBoxTimer'>" + this.getOutput() + "</div>"; 
       $("#" + this.id).append(htmloutput); 
       $("#" + this.id).append(htmlinput); 

     } 
} 

문제는 setTimeout 기능 때문입니다. 매번 전화하지 않고 1 또는 0과 동일한 출력을 제공합니다.

Answer 1

thisObjthis.Tick은 상위 참조 번호가 아닙니다. 그래서 당신은 자신의 부모에 대한 참조를 설정해야합니다. (코드가 생성자 함수의 일부인 경우 변수를 설정하면 충분합니다 (var thisObj = this) 그렇지 않으면 내가 제시 한 코드에서 알 수없는 부분이 있습니다. 를 설정하는 생성자 함수에서 그것과 같아야합니다..

var Parent = function(){ 
    var thisObj = this; 
    /* ... */ 
    this.Tick = { /*... */ }; 
    /* etc. */ 
} 

둘째, setTimeout 2 개 매개 변수,하지 3. 무시 공급하는 세 번째 매개 변수를 수신 을

(의견과 this page 참조) 셋째 : 재귀 적으로 Tick을 x 밀리 초 단위로 시간 제한을 사용하여 호출하려는 경우을 실행하는 것과 같습니다.간격은 x 밀리 초입니다. Javascript에는 setInterval이 포함되어 있으므로 다음과 같이 사용해야합니다. setInterval(thisObj.Tick, 1000);