如果用户交互，暂停自主功能？

Question

我正在尝试制作一个自动运行的旋转木马，但是如果用户与控件交互，我希望旋转木马重置它的计时器。我构建的东西在一定程度上是可行的，但是如果您与control-dot交互，计时器不会被重置，因此它会抛出一些有趣的结果.

这是我的JS

/* Js for carousel */
$('.steps__step-1').addClass('active');
$(function() {
  var lis = $('.step'),
    currentHighlight = 0;
  N = 5; // Duration in seconds
  setInterval(function() {
    currentHighlight = (currentHighlight + 1) % lis.length;
    lis.removeClass('active').eq(currentHighlight).addClass('active');
  }, N * 1000);
});

$('.control-dot').on('click', function(e) {
  e.preventDefault();
  $('.active').removeClass('active');
  var itemNo = $(this).index() - 1;
  $('.step').eq(itemNo).addClass('active');
});

http://jsfiddle.net/tnzLha3o/1/

Answer 1

您应该将区间id存储在变量(let intervalId = setInterval(...))中，然后使用它重新启动它。

这是您最新的小提琴：http://jsfiddle.net/gudzdanil/uzoydp6a/2/

这样，您的代码看起来就像：

var duration = 5;
var lis = $('.step'),
    currentHighlight = 0;
var intervalId = null;
$(function() {
  $('.steps__step-1').addClass('active');
  runCarousel();
});

$('.control-dot').on('click', function(e) {
  e.preventDefault();
  $('.active').removeClass('active');
  var itemNo = $(this).index() - 1;
  $('.step').eq(itemNo).addClass('active');
  rerunCarousel();
});

function rerunCarousel() {
  if(intervalId) clearInterval(intervalId);
  intervalId = null;
  runCarousel();
}

function runCarousel() {
  intervalId = setInterval(function() {
    currentHighlight = (currentHighlight + 1) % lis.length;
    lis.removeClass('active').eq(currentHighlight).addClass('active');
  }, N * 1000)
}

Answer 2

添加一个变量来阻止它。

 var stop = false
    $('.steps__step-1').addClass('active');
    $(function() {
        var lis = $('.step'),
            currentHighlight = 0;
            N = 5; // Duration in seconds
        setInterval(function() {
            if (!stop) {
            currentHighlight = (currentHighlight + 1) % lis.length;
            lis.removeClass('active').eq(currentHighlight).addClass('active');
            }
        }, N * 1000);

    });

    $('.control-dot').on('click', function(e){
        e.preventDefault();
        $('.active').removeClass('active');
        var itemNo = $(this).index() - 1;
        $('.step').eq(itemNo).addClass('active');
        stop = !stop
    });

http://jsfiddle.net/quvgxz63/