I am writing a Javascript class to cycle through a number of ticks and call a function at specified ticks. However, I am having a problem with my prototyping of the Javascript Class. The main count variable appears as undefined or Nan and one of the functions (methods) is apparently "not a function". Am just perplexed. Any pointers would be great.
Here is a JSFiddle: https://jsfiddle.net/hp5dj665/的值,但以下是相关代码:
<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.为什么Tick函数中的“this.tickCount”== Nan或undefined 2.当this.tick()是函数时,为什么this.monitorTick()显然不是函数?
之后东西可能会破坏,因为我无法超越那个阶段 - 但我希望这两个问题能够解决,以便我能够进步。感谢
更新
为了完整起见,按照我想发布的几条评论,我现在发布了addEvent函数:
addEvent:function(tickValue,funcCall,params){
this.eventArray[tickValue] = Array(funcCall,params);
},
现在打勾:
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...");
}
},
在setInterval调用上绑定“this”解决了初始问题。谢谢大家。
答案 0 :(得分:1)
我猜是因为tick
函数由setInterval
调用,因此不绑定到该对象。尝试
this.setint = window.setInterval(this.tick.bind(this),this.tickMilliSeconds);
详细了解JavaScript here
中this
的含义