Pause/Stop 最后一张幻灯片上的计数器

Question

我的网站上有以下几行代码：

HTML

<div class="qa">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>Last</div>
</div>

<p class="countdown-timer">00:01:00</p>

JavaScript/jQuery

$(document).ready(function() {
  $('.qa').slick({
    infinite: false,
    slidesToShow: 1,
    slidesToScroll: 1,
    adaptiveHeight: false,
    arrows: true,
    mobileFirst: true,
    respondTo: 'window',
    useCSS: true,
    swipeToSlide: false
  });
});

function Stopwatch(config) {
  // If no config is passed, create an empty set
  config = config || {};
  // Set the options (passed or default)
  this.element = config.element || {};
  this.previousTime = config.previousTime || new Date().getTime();
  this.paused = config.paused && true;
  this.elapsed = config.elapsed || 0;
  this.countingUp = config.countingUp && true;
  this.timeLimit = config.timeLimit || (this.countingUp ? 60 * 10 : 0);
  this.updateRate = config.updateRate || 100;
  this.onTimeUp = config.onTimeUp || function() {
    this.stop();
  };
  this.onTimeUpdate = config.onTimeUpdate || function() {
    console.log(this.elapsed)
  };
  if (!this.paused) {
    this.start();
  }
}

Stopwatch.prototype.start = function() {
  // Unlock the timer
  this.paused = false;
  // Update the current time
  this.previousTime = new Date().getTime();
  // Launch the counter
  this.keepCounting();
};

Stopwatch.prototype.keepCounting = function() {
  // Lock the timer if paused
  if (this.paused) {
    return true;
  }
  // Get the current time
  var now = new Date().getTime();
  // Calculate the time difference from last check and add/substract it to 'elapsed'
  var diff = (now - this.previousTime);
  if (!this.countingUp) {
    diff = -diff;
  }
  this.elapsed = this.elapsed + diff;
  // Update the time
  this.previousTime = now;
  // Execute the callback for the update
  this.onTimeUpdate();
  // If we hit the time limit, stop and execute the callback for time up
  if ((this.elapsed >= this.timeLimit && this.countingUp) || (this.elapsed <= this.timeLimit && !this.countingUp)) {
    this.stop();
    this.onTimeUp();
    return true;
  }
  // Execute that again in 'updateRate' milliseconds
  var that = this;
  setTimeout(function() {
    that.keepCounting();
  }, this.updateRate);
};

Stopwatch.prototype.stop = function() {
  // Change the status
  this.paused = true;
};

$(document).ready(function() {
  /*
   * First example, producing 2 identical counters (counting down)
   */
  $('.countdown-timer').each(function() {
    var stopwatch = new Stopwatch({
      'element': $(this),               // DOM element
      'paused': false,                  // Status
      'elapsed': 1000 * 60 * 1,         // Current time in milliseconds
      'countingUp': false,              // Counting up or down
      'timeLimit': 0,                   // Time limit in milliseconds
      'updateRate': 100,                // Update rate, in milliseconds
      'onTimeUp': function() {          // onTimeUp callback
            this.stop();
            $(this.element).html('Times Up');

            $(".qa").slick('slickGoTo', $('.qa div').length);    
      },
      'onTimeUpdate': function() {      // onTimeUpdate callback
        var t = this.elapsed,
            h = ('0' + Math.floor(t / 3600000)).slice(-2),
            m = ('0' + Math.floor(t % 3600000 / 60000)).slice(-2),
            s = ('0' + Math.floor(t % 60000 / 1000)).slice(-2);
        var formattedTime = h + ':' + m + ':' + s;
        $(this.element).html(formattedTime);
      }
    });
  });
  /*
   * Second example, producing 1 counter (counting up)
   */
  var stopwatch = new Stopwatch({
    'element': $('.countup-timer'),     // DOM element
    'paused': false,                    // Status
    'elapsed': 0,                       // Current time in milliseconds
    'countingUp': true,                 // Counting up or down
    'timeLimit': 1000 * 60 * 1,         // Time limit in milliseconds
    'updateRate': 100,                  // Update rate, in milliseconds
    'onTimeUp': function() {            // onTimeUp callback
      this.stop();
      $(this.element).html('Countdown finished!');
    },
    'onTimeUpdate': function() {        // onTimeUpdate callback
      var t = this.elapsed,
          h = ('0' + Math.floor(t / 3600000)).slice(-2),
          m = ('0' + Math.floor(t % 3600000 / 60000)).slice(-2),
          s = ('0' + Math.floor(t % 60000 / 1000)).slice(-2);
      var formattedTime = h + ':' + m + ':' + s;
      $(this.element).html(formattedTime);
    }
  });
});

Example/Demo

当倒数计时器达到 0 时，它会将轮播的当前位置转换到最后一张幻灯片，并从运行.

停止计时

由于我的项目中需要包含 previous 和 next 按钮，用户可能需要手动导航到此倒数计时器完成前的位置。

当他们到达最后一张幻灯片时，如何暂停或停止计数？

Answer 1

您可以监听 slick 的 afterChange 事件，并在处理后启动或停止秒表，具体取决于当前幻灯片的位置与幻灯片总数的比较情况。例如：

  $('.qa').on('afterChange', function(slick, currentSlide) {
    if(currentSlide.currentSlide < currentSlide.slideCount - 1) {
      theStopwatch.start();
    } else {
      theStopwatch.stop();
    }
  });

在页面更改时，此代码段将在最后一张幻灯片上暂停秒表并在上一张幻灯片上恢复。

请注意，我将您的秒表称为 theStopwatch。您需要让您的事件处理程序可以访问您的主要秒表。

来源：http://kenwheeler.github.io/slick/（搜索 'afterChange'）

Pause/Stop 最后一张幻灯片上的计数器

Pause/Stop Counter On Last Slide

javascript

jquery

html

css

slick.js