javascript - 如何设置javascript间隔一次

Question

我构建了一个 jquery 轮播。但是，当我快速向右或向左滑动时，会干扰并快速工作。我怎样才能解决这个问题？ Here is uploaded project

我在设置间隔中有设置变量，其中的设置变量是 Setinterval 的时间，项目是我的图像，幻灯片是要显示的事件图像，时钟是我的 Setinterval 功能。 当幻灯片更改时，我清除时钟变量，然后将其设置为超时，以便用户可以查看幻灯片并且幻灯片不会更改。

var settings = $.extend({
   interval: 5000,
   element: this.selector,
   items: ['images/1.jpg','images/2.jpg','images/3.jpg'],
   slide: 0,
   clock: 0,
}, options);

// Touch
$(settings.element + ' .primary img').on("swiperight", function () {
   nextSlide();
   pauseInterval();
   setTimeout(function () {
      if (!settings.clock)
         settings.clock = setInterval(nextSlide, settings.interval)
   }, 4000);
}).on("swipeleft", function () {
   prevSlide();
   pauseInterval();
   setTimeout(function () {
      if (!settings.clock)
         settings.clock = setInterval(prevSlide, settings.interval)
   }, 4000);
});

// Next Slide
function nextSlide() {
   settings.slide++;
   if (settings.slide >= settings.items.length) settings.slide = 0;
      $(settings.element + ' .primary img').attr('src', settings.items[settings.slide]).attr('data-slide', settings.slide);
   activeThumbnail()
}

// Prev Slide
function prevSlide() {
   settings.slide--;
   if (settings.slide < 0) settings.slide = settings.items.length;
   $(settings.element + ' .primary img').attr('src', settings.items[settings.slide]).attr('data-slide', settings.slide);
   activeThumbnail()
}

//Pause Interval
function pauseInterval() {
   clearInterval(settings.clock);
   settings.clock = 0;
}

Answer 1

您会发现单独使用 setTimout() 比混合使用 setTimout() 和 setInterval() 更简单。

没有独特的方法来编写代码。这是一个:

var settings = $.extend({
    'delay': {
        'long_': 9000, // (4000 + 5000) after swiping 
        'short_': 5000 // auto
    },
    'element': this.selector,
    'items': ['images/1.jpg', 'images/2.jpg', 'images/3.jpg'], // array of Strings
    'slide': 0,
    'clock': null
}, options);

$(settings.element + ' .primary img').on('swiperight', nextSlide).on('swipeleft', prevSlide); // nice and simple

// nextSlide() and prevSlide() ...
// in auto: `delay` will be `settings.delay.short_`.
// on manual swipe: `delay` will be `undefined` and will default to `settings.delay.long_`.
function nextSlide(delay) {
    delay = (delay === undefined) ? settings.delay.long_ : delay;
    settings.slide = (settings.slide + 1) % settings.items.length;
    set(nextSlide, delay);
}
function prevSlide(delay) {
    delay = (delay === undefined) ? settings.delay.long_ : delay;
    settings.slide = (settings.slide + settings.items.length - 1) % settings.items.length;
    set(prevSlide, delay);
}

// set() does all the stuff common to nextSlide() and prevSlide().
function set(action, delay) {
    $(settings.element + ' .primary img').attr('src', settings.items[settings.slide]).attr('data-slide', settings.slide);
    activeThumbnail();
    clearTimeout(settings.clock); // relevant only after a manual swipe, but does no harm in auto.
    settings.clock = setTimeout(action.bind(null, settings.delay.short_), delay);
}