正在尝试使用jQuery停止超时函数

Question

我有一组绝对定位的div，它们是图像的容器。每个div有一个photoCover类，每个img有一个fbPhoto类。我设置了一个循环功能，在页面加载时会将集合中的每个图像淡出，从而显示下面的图像，然后循环。

不过，当用户点击其中任何一个时，我需要的是能够停止这种情况。

我已经尝试了涉及$(this).stop(true, true)的各种选项和SO上的几个示例，但似乎都不起作用。

这是循环函数的代码

var thumbNailTimeOut;
function loopSmallSlides(eleArray) {
var slideCount = eleArray.length;
$(eleArray).each(function (indexInArray) {
var ele = this;
thumbNailTimeOut = setTimeout(function () {
if (indexInArray == slideCount - 1) {
$(eleArray).fadeIn('slow').on("click", function () {
clearTimeout(thumbNailTimeOut);
}); 
clearTimeout(thumbNailTimeOut);
loopSmallSlides(eleArray); // loop the function when the end is reached
} else {
$(ele).fadeToggle('slow').on("click", function () {
clearTimeout(thumbNailTimeOut);
}); 
};
}, (indexInArray + 1) * 1000);
});
};

循环函数接受document.ready上生成的元素数组，如下所示：

$(document).ready(function () {
$('.photoCover').each(function () {
// get an array of elements to slide
var eleArray = $(this).children('.fbPhoto').get().reverse();
loopSmallSlides(eleArray);
});
});

片段

$(ele).fadeToggle('slow').on("click", function () {
clearTimeout(thumbNailTimeOut);
}); 

正在尝试向数组中的每个元素添加一个单击处理程序，以便在单击这些元素时清除超时，但它不起作用。正如您所看到的，变量thumbNailTimeOut是一个全局可用的变量。。。据我所知，是否应该取消timeOut？

如前所述，我尝试过使用stop，但没有取得任何进展，我尝试向父元素添加click，然后在子元素中循环删除任何动画，如下所示，但这不起作用。

$('.photoCover').each(function () {
$(this).children('.fbPhoto').stop(true, true);
});

如果需要，HTML看起来像：

<style>
.photoCover{display:inline-block;width:204px;height:194px;vertical-align:top;}
.fbPhoto{position:absolute;display:inline-block;width:110px;height:110px;margin:4px;background-position:center center;background-repeat:no-repeat;border-radius:5px;border:16px groove #93BABA;background-color:#93BABA;}
</style>
<div class="photoCover">
<h4>Album Title</h4>                     
<span style="background-image: url('IMG URL');" class="fbPhoto"></span>
<span style="background-image: url(IMG URL); " class="fbPhoto"></span>
<span style="background-image: url(IMG URL); " class="fbPhoto"></span>
<span style="background-image: url(IMG URL); " class="fbPhoto"></span>
<span style="background-image: url(IMG URL); " class="fbPhoto"></span>                        
</div>

所以我的问题是，在父.photoCover元素中嵌套的每组图像上设置了这个循环后，我如何通过单击暂停动画，然后重新启动呢？

非常感谢您的帮助！SO上似乎还有很多其他问题，但我无法找到这个例子的答案！

Answer 1

thumbNailTimeOut在这个函数中被一次又一次地覆盖：

$(eleArray).each(function (indexInArray) { /* fn body */ });

函数完成工作后，变量中唯一存储的内容就是您设置的最后一个超时。您可以尝试将变量用作数组。例如：

thumbNailTimeOut[index] = setTimeout(function () { /* fn body */ }, delay);

清除超时将变成：

clearTimeout(thumbNailTimeOut[index]);

但说实话：我不喜欢你使用那么多超时的方法。也许使用单个区间函数会方便得多。

编辑：
我试图用一个间隔重写您的函数。我还没有尝试过，但它看起来比超时代码干净得多：

function loopSmallSlides(eleArray) {
var interval
,   $elems = $(eleArray);
,   current = 0;
,   slideCount = eleArray.length;
interval = setInterval(function(){
current = intervalFn($elems, current);
}, 1000);
$elems.on('click', function(e) {
clearInterval(interval);
});
};
function intervalFn($elems, current) {
if( current < $elems.length) {
$elems.eq(current).fadeIn('slow');
return current+1;
} else {
$elems.fadeOut('slow');
return 0;
}
}