Question

我有一个javascript / jquery计时器，我一直在努力，直到这一点我只需要启动并重置计时器。我现在需要添加一个函数来暂停它，我不知道该怎么做。

我能够通过清除间隔来暂停计时器，但现在我需要弄清楚如何在再次单击“重新开始”时恢复它，这就是我的问题所在。

我尝试将时间间隔传回功能，但这似乎没有帮助。

有什么想法吗？

// Define a global so we can clear it in our reset
var interval;

(function($) {

  // Define our plugins vars if they were not set
  $.fn.upCount = function(options, callback) {
    var settings = $.extend({
      startTime: null,
      offset: null,
      reset: null,
      resume: null
    }, options);

    // Save container
    var container = this,
      globalContainer = container.parent().html();

    // get the current date
    var currentDate = function() {
      var date = new Date();
      return date;
    };

    // Define some global vars
    var original_date = currentDate();
    var target_date = new Date('12/31/2030 12:00:00'); // Count up to this date

    // Are we resetting our counter?
    if (settings.reset) {
      return reset();
    }

    // Do we need to start our counter at a certain time if we left and came back?
    if (settings.startTime) {
      resumeTimer(newDate);
    }

    // Lets resume from where we paused
    if (settings.resume) {
      // not sure how to continue from where we paused...
    }

    // Are we pausing the timer?
    if (settings.pause) {
      return clearInterval(interval);
    }

    // Reset the counter by destroying the element it was bound to
    function reset() {
      var timerContainer = $('[name=timerContainer]');
      timerContainer.empty().append(globalContainer).find('.time').empty().append('00');
      clearInterval(interval);
    }

    // Given a start time, lets set the timer
    function resumeTimer(startTime) {
      original_date = startTime;
    }

    // Start the counter
    function countUp() {

      // Set our current date
      var current_date = currentDate();

      // difference of dates
      var difference = current_date - original_date;

      if (current_date >= target_date) {
        // stop timer
        clearInterval(interval);
        if (callback && typeof callback === 'function') callback();
        return;
      }

      // basic math variables
      var _second = 1000,
        _minute = _second * 60,
        _hour = _minute * 60,
        _day = _hour * 24;

      // calculate dates
      var days = Math.floor(difference / _day),
        hours = Math.floor((difference % _day) / _hour),
        minutes = Math.floor((difference % _hour) / _minute),
        seconds = Math.floor((difference % _minute) / _second);

      // fix dates so that it will show two digets
      days = (String(days).length >= 2) ? days : '0' + days;
      hours = (String(hours).length >= 2) ? hours : '0' + hours;
      minutes = (String(minutes).length >= 2) ? minutes : '0' + minutes;
      seconds = (String(seconds).length >= 2) ? seconds : '0' + seconds;

      // based on the date change the refrence wording
      var ref_days = (days === 1) ? 'day' : 'days',
        ref_hours = (hours === 1) ? 'hour' : 'hours',
        ref_minutes = (minutes === 1) ? 'minute' : 'minutes',
        ref_seconds = (seconds === 1) ? 'second' : 'seconds';

      // set to DOM
      container.find('.days').text(days);
      container.find('.hours').text(hours);
      container.find('.minutes').text(minutes);
      container.find('.seconds').text(seconds);

      container.find('.days_ref').text(ref_days);
      container.find('.hours_ref').text(ref_hours);
      container.find('.minutes_ref').text(ref_minutes);
      container.find('.seconds_ref').text(ref_seconds);

    };

    // start
    interval = setInterval(countUp, 1000);
  };

})(jQuery);

Answer 1

时间逻辑是你在这里遇到的最少问题。正如评论中指出的那样，解决起来非常简单：

记住计时器何时启动，并从时间中减去它他们点击暂停以获得剩余时间

我们需要以某种方式保存经过的时间，以便在重新启动时从总计中减去。我将使用jQuery .data进行演示。初始化original_date之类的变量的地方，添加一个新的var，它应检查以前保存的值：

var elapsed_time = container.data('elapsed');

然后，当您计算当前时差时，请确保将其保存在同一位置：

// difference of dates
var difference = (current_date - original_date) + (elapsed_time || 0);
container.data('elapsed', difference);

看看工作小提琴：https://jsfiddle.net/3dweffy8/13/

话虽如此，我想提一下你有一些奇怪的模式。它看起来像一个jQuery插件，但不是真的。它没有任何状态。它有这种奇怪的设置映射到函数。也许你应该让它成为普通的功能。或深入了解插件架构 - https://learn.jquery.com/plugins/advanced-plugin-concepts/

尝试创建实例，这样您就可以保存数据并附加方法。作为一个体面的插件的经验法则，你应该能够拥有多个实例，在你的情况下是几个定时器，在页面上独立运行。

Answer 2

简单地说，您可以全局保存原始日期和当前日期之间的差异，当您致电resume时，您必须从原始日期中减去全局差异，该日期将设置为当前日期：

if (settings.resume) {
    original_date.setTime(original_date.getTime() - lastDiff);
    interval = setInterval(countUp, 1000);
    return;
}

演示： https://jsfiddle.net/o6rm1s4x/

javascript计时器实现暂停功能

2 个答案: