Question

我知道有很多关于这个主题的问题，但似乎没有一个答案对我有用（或者我可能没有看到明显的东西）。我正在构建一个特色内容滑块，应该在悬停时暂停。但是，如果我用鼠标移动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：如何正确暂停递归？

1 个答案: