回调函数没有被调用

Question

我几天来一直在努力解决这个问题...我似乎无法解决回调函数问题，我认为这是因为范围问题，因为代码在我分离“类”时起作用并手动测试所有功能等。

我有一个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()会这样做。在更正了功能名称之后，它们完美地工作了：）

Answer 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属性。

回调被调用，但不正确。