我几天来一直在努力解决这个问题...我似乎无法解决回调函数问题，我认为这是因为范围问题，因为代码在我分离“类”时起作用并手动测试所有功能等。
我有一个VisualTimer对象
function VisualTimer(customConfig) {
// Create a new Timer object
var object = this;
this.timer = new Timer(object, function(data) { this.timerUpdated(data); }, function (data) { this.timerFinished(data); });
// Set default configuration
this.config = {
// The ID's of the timer's control elements
pauseButtonId : "pause-timer",
startButtonId : "start-timer",
stopButtonId : "stop-timer",
// The ID's of the timer's display elements
hoursDisplayId : "hours-left",
minutesDisplayId : "minutes-left",
secondsDisplayId : "seconds-left",
// The ID's of the timer's input elements
hoursInputId : "hours-left",
minutesInputId : "minutes-left",
secondsInputId : "seconds-left",
};
// Replace the default configuration if a custom config has been provided
if (typeof(customConfig) == "object") this.config = customConfig;
}
用作Timer对象的扩展，只是为了分隔底层计时器和可视控件。正如您所看到的，我正在使用应在每次更新时调用的VisualTimer函数注入新的Timer（）“对象”。但是，它不起作用。
Timer“对象”定义如下
function Timer(callbackObject, updateCallback, finishedCallback) {
// Define timer variables
this.state = Timer.stateStopped;
this.callbackObject = (typeof(callbackObject) == "object") ? callbackObject : null;
this.updateCallback = (typeof(updateCallback) == "function") ? updateCallback : null;
this.finishedCallback = (typeof(finishedCallback) == "function") ? finishedCallback : null;
this.hours = 0;
this.minutes = 0;
this.seconds = 0;
// Save the values that the timer was initially set to
this.startHours = 0;
this.startMinutes = 0;
this.startSeconds = 0;
/**
* Store the setInterval() ID that is created when the timer is started
* so that we can use this to clear it (stop the timer) later on.
*/
this.interval = null;
}
具有启动，暂停，停止等功能，正如您在“构造函数”中看到的那样，我有注入回调函数的变量，应该在每次滴答后调用
Timer.prototype.tick = function(fireCallback) {
fireCallback = (typeof(fireCallback) == "boolean") ? fireCallback : true;
if (this.seconds > 0) {
// If the seconds value is bigger than 0, subtract it by 1
this.seconds -= 1;
// Fire the update callback function
console.log(this.hours + ":" + this.minutes + ":" + this.seconds);
if (fireCallback && this.updateCallback != null) this.updateCallback.call(this.callbackObject, this.getCurrentValues());
}
else if (this.minutes > 0) {
// If the seconds value is 0 but not the minutes value, subtract it by 1
this.minutes -= 1;
// And then also update the seconds value
this.seconds = 59;
// Fire the update callback function
console.log(this.hours + ":" + this.minutes + ":" + this.seconds);
if (fireCallback && this.updateCallback != null) this.updateCallback.call(this.callbackObject, this.getCurrentValues());
}
else if (this.hours > 0) {
// If neither the seconds nor the minutes value is bigger than 0 but the hours value is, subtract it by 1
this.hours -= 1;
// And then also update the minutes and the seconds values
this.minutes = 59;
this.seconds = 59;
// Fire the update callback function
console.log(this.hours + ":" + this.minutes + ":" + this.seconds);
if (fireCallback && this.updateCallback != null) this.updateCallback.call(this.callbackObject, this.getCurrentValues());
}
else {
// Stop the timer
this.stop(false);
// Fire the finished callback function
console.log("The timer has finished.");
if (fireCallback && this.finishedCallback != null) this.finishedCallback.call(this.callbackObject, this.getInitialValues());
}
};
滴答作用非常好，所以到目前为止代码没有任何问题，并且console.log（）输出正确，因此定时器和滴答功能完美无缺。但是，回调函数不会被触发。
我已经做了很多调试，并且所有函数都运行良好，所以问题肯定在于实际调用注入的回调函数。其他一切都按预期工作。
这是应该在每个tick上触发的updateCallback函数
VisualTimer.prototype.timerUpdated = function(timerData) {
if (typeof(timerData) == "object")
{
if (timerData.state == Timer.stateRunning) {
// Update the timer's display elements with new values
this.updateDisplayElements(timerData.hours, timerData.minutes, timerData.seconds);
}
else if (timerData.state == Timer.statePaused) {
// Make sure the correct values are displayed
this.updateDisplayElements(timerData.hours, timerData.minutes, timerData.seconds);
window.alert("The timer has been paused!");
}
else if (timerData.state == Timer.stateStopped) {
// Reset the timer's input and display elements
this.updateDisplayElements();
this.updateInputElements();
window.alert("The timer has been stopped!");
}
}
};
更新 所有代码现在都以JSFiddle project格式提供。
第二次更新：
问题解决了！问题是state属性从未发送到回调函数，因为应该命名为getInitialValues()的函数被意外命名为getCurrentValues()，因此覆盖了该函数。 getInitialValues()不会发送状态，但是getCurrentValues()会这样做。在更正了功能名称之后，它们完美地工作了：）
答案 0 :(得分：1)
您没有正确地将计时器的状态传递给回调，因此此代码始终为no-ops
VisualTimer.prototype.timerUpdated = function(timerData) {
if (typeof(timerData) == "object")
{
if (timerData.state == Timer.stateRunning) { // THIS IS ALWAYS FALSE
// Update the timer's display elements with new values
this.updateDisplayElements(timerData.hours, timerData.minutes, timerData.seconds);
}
else if (timerData.state == Timer.statePaused) {
// Make sure the correct values are displayed
this.updateDisplayElements(timerData.hours, timerData.minutes, timerData.seconds);
window.alert("The timer has been paused!");
}
else if (timerData.state == Timer.stateStopped) {
// Reset the timer's input and display elements
this.updateDisplayElements();
this.updateInputElements();
window.alert("The timer has been stopped!");
}
}
};
因为state上实际上没有timerData属性。这是您设置状态的地方。此时this对象是Timer对象本身
// Set the current state to running
this.state = Timer.stateRunning;
然后当你拨打上面的noop代码时，你会这样做：
if (fireCallback && this.updateCallback != null) this.updateCallback.call(this.callbackObject, this.getCurrentValues());
将this设置为this.callbackObject，其中没有state属性。
回调被调用，但不正确。