2015-03-30 7 views
0

Я знаю, что есть много вопросов по этой теме, но кажется, что ни один из ответов не работает для меня (или, может быть, я не вижу ничего очевидного). Я создаю расширенный слайдер контента, который должен приостанавливаться при наведении. Однако, если я перемещаюсь с помощью мыши 5-6 раз, он проходит через петлю 5-6 раз и становится глючным. Предыдущая рекурсия не прекращается, и инициируется новая.jQuery: Как правильно приостановить рекурсию?

Моя функция:

gravityFeatured.prototype.loop = function(slide) { 

    // Begin 
    var self = this; 
    if(typeof slide == 'undefined') { 
     slide = 0; 
    } 
    self.slidesWrapper.find('.slide-wrapper').removeClass('current next prev'); 
    self.navigation.find('.navigation-item').removeClass('current'); 

    // Current slide 
    currentSlide = self.slidesWrapper.find('.slide-wrapper[data-slide="' + slide + '"]'); 
    currentNav = self.navigation.find('.navigation-item[data-slide="' + slide + '"]'); 

    // Next slide 
    var nextSlide = self.slidesWrapper.find('.slide-wrapper[data-slide="' + (slide + 1) + '"]'); 
    var next = slide+1; 
    if(!nextSlide.length) { 
     nextSlide = self.slidesWrapper.find('.slide-wrapper[data-slide="0"]'); 
     next = 0; 
    } 

    // Prev slide 
    var prevSlide = self.slidesWrapper.find('.slide-wrapper[data-slide="' + (slide - 1) + '"]'); 
    if(!prevSlide.length) {  
     prevSlide = self.slidesWrapper.find('.slide-wrapper[data-slide="' + (self.slides.length - 1) + '"]'); 
    } 

    // Assign classes 
    currentSlide.addClass('current'); 
    currentNav.addClass('current'); 
    nextSlide.addClass('next'); 
    prevSlide.addClass('prev'); 

    self.scrollNavigation(slide); 

    // Loop 
    var timeout = setTimeout(function(){ 
     self.loop(next); 
    }, self.options['delay']); 

    self.slidesWrapper.hover(function(){ 
     clearTimeout(timeout); 
    }, function(){ 
     timeout = setTimeout(function(){self.loop(next);}); 
    }); 
} 
+0

Вы просмотрели https://api.jquery.com/stop/ –

+0

Да, он отменяет все, и когда я перемещаю мышь, функция не продолжается. – Skatch

ответ

1

Так с текущей настройки каждый раз, когда вы MouseOut вы вызываете ход. Таким образом, 5 и 5 раз запускает 5 ходов. Возможно, лучше поработать, чтобы приостановить обратный отсчет, пока мышь находится в паре. Это будет выглядеть примерно так:

gravityFeatured.countdown = null, 
gravityFeatured.isPaused = false, 
gravityFeatured.prototype.loop = function(slide) { 
... 
    self.scrollNavigation(slide); 

    self.countdown = self.options['delay'] * 1000; 

    var timeout = null; /* need this in loopCheck */ 
    var loopCheck = function() { 
     if (!this.isPaused) 
      this.countdown -= 500; 

     if (this.countdown <= 0) 
      this.loop(next); 
     else 
      timeout = setTimeout(loopCheck,500); /* check every half sec */ 
    } 

    timeout = setTimeout(loopCheck,500); 

    self.slidesWrapper.hover(function(){ 
     self.isPaused = true 
    }, function(){ 
     self.isPaused = false; 
    }); 
} 

полсекунды тайм-аут может быть немного долго, вероятно, может снизиться до 250мс, если это необходимо. Тем не менее, нужно много работать с движением мыши.

+0

Отлично работает! Благодаря! – Skatch

+0

Один вопрос, когда я установил обратный отсчет до 250, задержка между слайдами, похоже, замедляется. Не то, что мне понадобится 250, просто любопытно, почему это происходит. – Skatch

+0

Ах, я забыл поставить 250 в последнем вызове 'timeout = setTimeout (loopCheck, 250);', my bad. :) – Skatch

Смежные вопросы