如何暂停和恢复计时器对象

时间:2017-03-07 22:17:45

标签: javascript timer

我正在制作一个计时器,好吧我正在制作计时器...基本上你可以为某些东西启动一个计时器,但后来的想法是,在中间你可能想要启动别的东西,这样你就可以暂停它并开始另一个,然后当完成后,你可以恢复初始计时器。

计时器对象工作正常,我可以让多个计时器同时运行...我的问题是,当我去恢复第一个计时器时,它等待另一个计时器之前的时间量重新开始。

我在这里有一个基本的小提琴:https://jsfiddle.net/1ea07uv9/19/

我为代码道歉...我一直在搞乱它试图让它工作它已经变得非常混乱......它不能完全按照我在当地环境中的方式工作但它说明了我问题....如果你点击开始第一个计时器的小提琴...等待大约十秒左右然后点击计时器一停止...大约10秒然后继续...我需要它继续马上。

我很确定它与线条有关:

var diff = (new Date().getTime() - currentObj.start) - currentObj.time;
currentObj.timerInit = window.setTimeout(instance, (1000 - diff));

现在,currentObj.start现在已经等了多久了?

编辑:有人要求我在这篇文章中发布我的代码而不仅仅是一个小提琴,所以这里是

//Array where jobs will be stored
var jobs = [],
    begin = false;

//Job object
function Job(name, active, s, m, h, elapsed){
    var currentObj = this;
    this.name = name;
    this.seconds = s;
    this.minutes = m;
    this.hours = h;
    this.time = 0;
    this.elapsed = elapsed;
    this.timeLimit = 28800;
    this.completePercent = 0;
    this.jobNumber = 0;
    this.timer = function(begin){
        var secondStr = '00',
            minuteStr = '00',
            hourStr = '00';

        currentObj.start = new Date().getTime();

        function instance(){
            currentObj.time += 1000;
            currentObj.elapsed = Math.floor(currentObj.time / 1000);
            secondStr = currentObj.seconds.toString();
            if(secondStr.length == 1){
                secondStr = '0' + currentObj.seconds.toString();
            }
            minuteStr = currentObj.minutes.toString();
            if(minuteStr.length == 1){
                minuteStr = '0' + currentObj.minutes.toString();
            }
            hourStr = currentObj.hours.toString();

            if(currentObj.seconds <= 58){
                currentObj.seconds++;
            }else{
                currentObj.seconds = 0;
                if(currentObj.minutes <= 58){
                    currentObj.minutes++;
                }else{
                    currentObj.minutes = 0;
                    currentObj.hours++;
                }
            }

            $('[data-job-id="'+currentObj.jobNumber+'"]').html(hourStr + ':' + minuteStr + ':' + secondStr);

            var diff = (new Date().getTime() - currentObj.start) - currentObj.time;
            currentObj.timerInit = window.setTimeout(instance, (1000 - diff));
        }
        if(begin){
            currentObj.timerInit = window.setTimeout(instance, 1000);
        }
    }
    this.pause = function(){
        clearTimeout(this.timerInit);
    }
}

//Create the snooze timer object and chuck it into the array
jobs.push(new Job('snooze', false, 0, 0, 0, 0));

//Begin specific timer
$('#timer_start').click(function(e){
e.preventDefault();
    if(jobs.length <= 3){
        //Create new job object and push it into the array
        jobs.push(new Job('jobNameInput', true, 0, 0, 0, 0));
        //Loop through all of the jobs and give it a number (according to its array position)
        for(var i=0; i < jobs.length; i++){
            jobs[i].jobNumber = i;
            //Give the jobs their names but check we arent changing the snooze button!

    if(i == jobs.length - 1){
                jobs[i].timer(true);
            }
        }
    }else{
        alert('sorry mate...you can only have 3 jobs!');
    }
});

//Switch timer
$('.start').click(function(){
    var thisTimer = $(this).next('.time').attr('data-job-id');
    for(var i=0; i < jobs.length; i++){
        jobs[i].pause();
    }

    jobs[thisTimer].timer(true);
});

0 个答案:

没有答案