Question

我想在特定时间后触发一些事件。计时器应该是可以使用的。这是代码： http://jsfiddle.net/xsH8v/

问题是如何触发此

  if (Clock.totalSeconds >= givenTime){
    alert('time is up!');
  }

我把它放在document.ready中。但是时间到了，它不会被解雇。我认为问题在于根本不会调用该函数。如果是这样，我该如何触发呢？

Answer 1

您可以将回调函数maxTime传递给Clock.start()，该函数将在延长给定时间后被引导

var givenTime = 5;
//maxTime is call back function which is executed after extend giventTime
Clock.start(maxTime, givenTime);

function maxTime(){
   //do stuff after extend maximum time.
}

//here is your call back function is invoked when `givenTime` time is extended
// inside the `start function`
//after that every second the call back function is executed.

if(self.totalSeconds >= givenTime){
     callBack();
}

完成DEMO

如果您只想执行一次定时代码。然后你可以在start()函数中设置编码，比如

if(self.totalSeconds == givenTime){

DEMO2

<强>更新

在您的情况下，请通过删除var使变量giventTime全局变为全局，并将maxTime()函数放在$( document ).ready

之外

$( document ).ready(function() {...});

function maxTime(){
       alert('time up');
    }

将start()函数的相对参数传递给resume()函数，如

if (!this.interval) this.start(maxTime, givenTime)

DEMO3

Answer 2

您的方法不起作用，因为if语句仅评估一次;在文档加载。要解决此问题，您需要添加每次更新totalSeconds时都要检查的回调。

这是我的解决方案; fiddle here

您可以使用Clock.at(time, callback)添加功能，如下所示：

Clock.at（10，function（）{/ * 10秒过去* /}）;

var Clock = {
    totalSeconds: 0,

    handlers: [],

    start: function () {
        var self = this;

        this.interval = setInterval(function () {
            self.totalSeconds += 1;

            sec = parseInt(self.totalSeconds % 60)
            min = Math.floor(self.totalSeconds / 60 % 60)
            hour = Math.floor(self.totalSeconds / 3600)

            $("#hour").text(hour);
            $("#min").text(min);
            $("#sec").text(sec);

            // Fire each expired handlers
            self.handlers = self.handlers.filter(function(handler) {

                if (self.totalSeconds >= handler.time) {
                    // Fire the handler then remove it
                    handler.func();
                    return false;
                }

                return true;
            })

        }, 1000);
    },

    pause: function () {
        clearInterval(this.interval);
        delete this.interval;
    },

    resume: function () {
        if (!this.interval) this.start();
    },

    at: function(time, handler) {

        // Handle expired handlers
        if (this.totalSeconds >= time) handler();

        // Add the handler to the queue
        this.handlers.push({
            time: time,
            func: handler,
        });
    }
};

Answer 3

如果totalSeconds每次更新setInterval时都应调用语句，请将其放在setInterval函数中。您可以将给定时间作为参数传递给start函数。 updated fiddle

$( document ).ready(function() {
  Clock.start(5);
  $('#pauseButton').click(function () { Clock.pause(); });
  $('#resumeButton').click(function () { Clock.resume(); });

});

var Clock = {
    totalSeconds: 0,

    start: function (maxTime) {
        var self = this;

        this.interval = setInterval(function () {
            self.totalSeconds += 1;

            sec = parseInt(self.totalSeconds % 60)
            min = Math.floor(self.totalSeconds / 60 % 60)
            hour = Math.floor(self.totalSeconds / 3600)

            $("#hour").text(hour);
            $("#min").text(min);
            $("#sec").text(sec);

            // Check condition after each increment in Clock.totalSeconds
            if (Clock.totalSeconds >= maxTime) {
                Clock.pause();
                alert('time is up!');
            }
        }, 1000);
    },

    pause: function () {
        clearInterval(this.interval);
        delete this.interval;
    },

    resume: function () {
        if (!this.interval) this.start();
    }
};

js：暂停/恢复后触发定时事件

3 个答案: