gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 10:27:45 28 4
gpt4 key购买 nike

我知道关于这个主题有很多问题,但似乎没有一个答案对我有用(或者也许我没有看到明显的东西)。我正在构建一个特色内容 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);});
});
}

最佳答案

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

关于javascript - jQuery:如何正确暂停递归?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29341039/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com