Question

我建立了一个jquery旋转木马。但是当我做快速Swiperight或离开间隔时会干扰并快速工作。我怎样才能解决这个问题？ Here is uploaded project

我在设置间隔中设置变量是Setinterval的时间，项目是我的图像，Slide是活动图像显示，Clock是我的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);
}

如何设置一次javascript间隔

1 个答案: