Question

我有一个函数，我应该暂停mouseenter并暂停mouseleave，但问题是该函数是递归的。您传入父和索引，它将递归循环遍历显示和隐藏的每个内部div。该函数如下所示：

var delay = 1000;
function cycle(variable, j){
    var jmax = jQuery(variable + " div").length;
    jQuery(variable + " div:eq(" + j + ")")
        .css('display', 'block')
        .animate({opacity: 1}, 600)
        .animate({opacity: 1}, delay)
        .animate({opacity: 0}, 800, function(){
            if(j+1 === jmax){ 
                j=0;
            }else{ 
                j++;
            }
            jQuery(this).css('display', 'none').animate({opacity: 0}, 10);

            cycle(variable, j);
        });
}

我已经尝试设置超时并清除它但它似乎没有做任何事情（它似乎完全忽略了超时），我尝试使用stop（）并在mouseout上再次调用该函数但似乎重复函数调用（我看到重复），它停止了动画中期无法正常工作。我尝试在一个点（var pause = false || true;）添加一个默认变量，但我也无法按预期工作（尽管我觉得解决方案依赖于该变量）。我对所有建议持开放态度，但有一些参与规则：

规则：此功能的工作方式不会发生任何重大变化，因为很多东西依赖它，这是我无法控制的。假设函数调用看起来像这个jQuery('#divList', 0)并且拥有一堆div元素作为子元素。

超时功能是我尝试的最后一个解决方案，如下所示：

jQuery('#divList').on('mouseenter', function(){
    setTimeout(cycle, 100000);
})
.on('mouseleave', function(){
    window.clearTimeout();
});

Answer 1

在确定是否要运行之前，您需要设置每个cycle检查的标记。然后，您可以在触发鼠标事件时更改该标志。如果您需要在取消暂停时选择停止的位置，请考虑保存j的最后一个值

function cycle(variable, j){
    if (window.paused) {
        window.last_j = j;
        return;
    }
    ...

然后，当您想暂停时，只需设置window.paused = true即可。要恢复，请将其更改为false并再次致电cycle：

cycle(variable, last_j);

Answer 2

也许是这样的？我简化了动画只是为了使示例更简单，但您应该能够根据自己的需要进行调整。

首先，我们有一个负责动画一组元素的函数。每个函数调用都会返回一个允许切换动画的新函数（暂停和恢复之间的转换）。

function startCycleAnimation(els) {

    var index = 0,
        $els = $(els),
        $animatedEl;

    animate($nextEl());

    return pauseCycleAnimation;

    function animate($el, startOpacity) {
        $el.css('opacity', startOpacity || 1)
           .animate({ opacity: 0 }, 800, function () {
                animate($nextEl());
            });
    }

    function $nextEl() {
        index = index % $els.length;
        return $animatedEl = $els.slice(index++, index);
    }

    function pauseCycleAnimation() {
        $animatedEl.stop(true);

        return resumeCycleAnimation;
    }

    function resumeCycleAnimation() {
         animate($animatedEl, $animatedEl.css('opacity'));

         return pauseCycleAnimation;
    }
}

然后我们可以通过以下方式启动所有内容：

$(function () {
    var $animationContainer = $('#animation-container'),
        toggleAnimation = startCycleAnimation($animationContainer.children('div'));

    $animationContainer.mouseenter(pauseOrResume).mouseleave(pauseOrResume);

    function pauseOrResume() {
        toggleAnimation = toggleAnimation();
    }
});

示例HTML

<body>
    <div id="animation-container">
        <div>Div 1</div>
        <div>Div 2</div>
        <div>Div 3</div>
    </div>
</body>

如果你想要更通用的东西，似乎there's a plugin会覆盖animate并允许以通用的方式暂停/恢复动画。

暂停递归函数调用

2 个答案: