未调用回调函数
Callback functions not getting called
我已经为此苦苦挣扎了好几天了......我似乎无法触发回调函数,我认为这是因为范围问题,因为当我分离"类"并手动测试所有函数等时,代码有效。
我有一个可视化计时器对象
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 对象的扩展,只是为了分离基础计时器和可视控件。如您所见,我正在向新的 Timer() "对象"注入 VisualTimer 函数,这些函数应在每次更新时调用。但是,它不起作用。
计时器"对象"定义如下
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() 输出正确,因此计时器和滴答函数完美运行。但是,回调函数不会被触发。
我已经做了很多调试,所有函数都运行良好,所以问题肯定出在实际调用注入的回调函数上。其他一切都按预期工作。
这是应该在每个报价时触发的 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 项目提供。
第二次更新:
问题解决了!问题是 state
属性从未发送到回调函数,因为应该命名的函数getInitialValues()
意外地命名为 getCurrentValues()
,因此覆盖了该函数。 getInitialValues()
不会发送状态,但getCurrentValues()
发送状态。更正函数名称后,一切正常:)
您没有正确地将计时器的状态传递到回调中,因此此代码始终无操作
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!");
}
}
};
因为实际上timerData
上没有state
属性.这是您设置状态的位置。此时,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
设置为没有state
属性的this.callbackObject
。
正在调用回调,只是不正确。
- 如何将一个JavaScript函数回调为多个函数
- Meteor:异步函数回调异常:onAfterAction
- 从类方法中的 ajax post 函数回调函数更改 javascript 类属性
- jQuery动画函数回调错误
- jquery在html属性中添加函数回调,以便在其他事件中调用
- jquery getjson 函数:回调返回错误的字符串
- postMessage - 多个 postMessage 事件/函数/回调
- 在 Promise 调用的错误函数回调后附加对象的用法是什么
- 单击事件后的 JavaScript 函数回调
- 设置超时函数回调静态变量
- Jquery UI 模式匿名函数回调以打开对话框
- 函数回调、局部变量和 chrome.storage.sync.get
- Jquery Ajax 没有拾取选项参数中指定的函数回调
- 如何在 javascript 中进行函数回调
- 用函数回调封装JavaScript
- jQuery JavaScript嵌套异步函数回调
- Node.js-匿名函数回调
- 函数回调超出范围
- php代码的Javascript函数回调
- 如何使用函数回调在更改时提交表单