2016-04-12 8 views
0

私はダニの数を循環するためにJavaScriptクラスを書いて、指定されたティックで関数を呼び出しています。しかし、Javascriptクラスのプロトタイプに問題があります。メインカウント変数は未定義またはNanとして表示され、関数(メソッド)の1つは明らかに「関数ではありません」です。ちょうど困惑しています。どのポインタも素晴らしいでしょう。ここでエラー - ない機能と未定義の変数

はJSFiddleです:

<script> 
function tickStep(tickInMilliSeconds){ 
     this.tickCount = 0; //just used as a counter 
     this.tickMax = 48; //highest number of ticks before it ends 
     this.monitorTextInputId = ""; 
     this.paused = false; 
     this.tickMilliSeconds = tickInMilliSeconds; 
     this.tickRepeat = true; //when reaching the end start again at the beginning 
     this.eventArray = new Array(); 
     this.setint; //the set time out variable  
    } 

    tickStep.prototype = { 
     constructor: tickStep, 

     monitorTick:function(){ 
      console.log(this.tickCount); 
     /* if(this.monitorTextInputId.length>0){ 
       document.getElementById(this.monitorTextInputId).value = this.tickCount; 
      }*/ 
     }, 

     tick:function(){ 
      if(!this.paused){     
       console.log("HERE: "+this.tickCount); // WHY IS THIS NaN ??? <--------------- 
       this.tickCount++; 
       if(this.tickCount>this.tickMax && this.tickRepeat){ 
        this.tickCount = 0; 
       } 
       console.log("tick: "+this.tickCount); 
       if(this.tickCount>this.tickMax && !this.tickRepeat){ 
        this.stop(); 
        return false; 
       } 
       this.monitorTick(); // <!----------------- WHY DOES THIS SAY IT IS NOT A FUNCTION? 
       if(typeof this.eventArray[this.tickCount] !== "undefined"){ 
        if(this.isAFunction(this.eventArray[this.tickCount])){ 
         eval(this.eventArray[this.tickCount]); 
        } 
       } 
      }else{ 
       console.log("Paused..."); 
      } 
     }, 

     isAFunction:function(functionalCall){ 
      if(functionName.indexOf("(")){ //remove the brackety stuff 
       functionName = functionName.substring(0,functionName.indexOf("("));     
      } 
      console.log("Testing for function: "+functionName); 
      return typeof(functionName) === typeOf(Function); 
     }, 

     start:function(){ 
      console.log("STARTING"); 
      if(!this.tickMilliSeconds>0){ 
       this.tickMilliSeconds = 1000; //default to 1 second 
       console.log("defaulting to 1 tick = 1000ms") 
      } 
      console.log("Tick duration: "+this.tickMilliSeconds); 
      this.setint = window.setInterval(this.tick,this.tickMilliSeconds); 
     }, 

     stop:function(){ 
      console.log("STOPPING");   
      clearInterval(this.setint); 
     }, 

     restart:function(){ 
      console.log("RESTARTING"); 
      this.stop(); 
      this.tickCount =0; 
      this.start(); 
     }, 

     pause:function(){ 
      this.paused = !this.paused; 
     }, 

     addEvent:function(tickValue,funcCall,params){ 
      this.eventArray[this.tickValue] = funcCall+"("+params+")"; 
     }, 

     removeEvent:function(tickValue){ 
      this.eventArray[this.tickValue] = null; 
     } 

    } //end of tickStep prototype 



    var seq = new tickStep(); 
    seq.monitorTextInputId = "tb"; 

    var myFunction = function(){ 
     console.log("myFunctionCalled"); 
    } 

    seq.addEvent(2,myFunction,""); 
    seq.start(); 

</script> 

ので 1.なぜ「this.tickCountは」ティック関数内ナンまたは未定義==ない 2.なぜ:https://jsfiddle.net/hp5dj665/が、ここでは、問題のコードですthis.monitorTick()は、this.tick()が関数の場合、明らかに関数ではありませんか?私はその段階を乗り越えることができないよう

スタッフはその後破損する可能性が - しかし、私は私が進行する可能性が出てソートこれらの2つのクエリをしたいと思います。おかげ

UPDATE

ちょうど完全のために、私はaddEvent機能が今であることを投稿するだろうと思ったコメントのカップル、以下:

 addEvent:function(tickValue,funcCall,params){ 
      this.eventArray[tickValue] = Array(funcCall,params);     
     }, 

とダニは今です:

setIntervalコールで「これを」結合
 tick:function(){ 
      if(!this.paused){     
       this.tickCount++; 
       if(this.tickCount>this.tickMax && this.tickRepeat){ 
        this.tickCount = 0; 
       } 
       if(this.tickCount>this.tickMax && !this.tickRepeat){ 
        this.stop(); 
        return false; 
       } 
       this.monitorTick(); 
       if(typeof this.eventArray[this.tickCount] != "undefined"){ 
        this.eventArray[this.tickCount][0](this.eventArray[this.tickCount][1]); 
       } 
      }else{ 
       console.log("Paused..."); 
      } 
     }, 

は、最初の問題を解決しました。みんな、ありがとう。

+0

thisの意味についての詳細を読む

this.setint = window.setInterval(this.tick.bind(this),this.tickMilliSeconds); 

を試してみてください。どこから始めるかは分かりません。 – Pointy

+0

さて、私はこの1つを含むウェブラウンド様々な例に基づいて、清楚ためのオブジェクトにフラットなスクリプトから転送しようとしています:http://javascriptissexy.com/oop-in-javascript-what-you-need-to -know/ –

+0

@Pointy、なぜ関数のパラメータを扱うのが間違っているのですか? –

答えて

1

tick機能がsetIntervalによって呼び出されるため、オブジェクトにバインドされていないので、私は推測します。そのコード内の関数のパラメータの取り扱いについてのすべてはかなり間違っているJavaScriptのhere

+0

を明確にしていただきありがとうございます。「これ」は現在のオブジェクトを参照しているわけではありませんか? –

+0

スクリプトがフラットなとき(私がオブジェクトにする前に)、原則が働いた。今すぐテスト。 –

+1

"*オブジェクトにはもうバインドされていません*" - オブジェクトにバインドされたのとまったく同じではありません。 – Bergi

関連する問題