jQuery: 如何正确暂停递归？

Question

我知道有很多关于该主题的问题，但似乎 none 的答案对我有用（或者我没有看到明显的东西）。我正在构建一个特色内容滑块，它应该在悬停时暂停。但是，如果我用鼠标移动 5-6 次，它会一次循环 5-6 次，然后就会出现错误。之前的递归没有停止，又开始了新的递归。

我的函数：

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);});
    });
}

Answer 1

因此，在当前设置下，每次鼠标移开都会触发移动。因此进出 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 毫秒。不过应该可以处理大量的鼠标移动。

jQuery: 如何正确暂停递归？

jQuery: How to properly pause a recursion?

javascript

recursion

jquery

settimeout