javascript - 回调函数没有被调用

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 对象的扩展，只是为了分离底层计时器和可视控件。正如您所看到的，我正在注入(inject)新的 Timer() “对象”以及应在每次更新时调用的 VisualTimer 函数。但是，这不起作用。

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;
}

具有用于启动、暂停、停止等的函数，正如您在“构造函数”中看到的那样，我有用于注入(inject)回调函数的变量，这些函数应该在每个刻度后调用

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() 输出正确，因此计时器和滴答功能工作完美。不过，回调函数不会被触发。

我已经进行了大量的调试，并且所有函数都运行良好，因此问题肯定出在注入(inject)的回调函数的实际调用中。其他一切都按预期进行。

这是应该在每个刻度上触发的 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

您没有将计时器的状态正确传递到回调中，因此此代码始终无操作

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 设置为 this.callbackObject，而它没有 state 属性。

回调被调用，只是不正确。