javascript - jQuery:如何正确暂停递归？

Question

我知道关于这个主题有很多问题，但似乎没有一个答案对我有用(或者也许我没有看到明显的东西)。我正在构建一个特色内容 slider ，应在悬停时暂停。然而，如果我用鼠标移动 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 毫秒。不过应该可以处理大量的鼠标移动。