如何停止基于jQuery延迟定时器的动画

How to stop jQuery delay timer based animation?

本文关键字：定时器 动画 延迟 jQuery 何停止      更新时间：2023-12-21

所以我用幻灯片导航从头开始构建这个模态/定时动画。

我有一个用于导航幻灯片的按钮的功能，还有一个每隔5秒为帧设置动画的功能。我的问题是，如果用户决定通过点击导航按钮来接管，我不知道如何"打破"延迟功能。一旦用户单击这些按钮中的任何一个，基于延迟的动画功能就需要停止工作。

    // Timer for Animating Frames
    // Need a kill timer function
    var animateFramesTimer = function(){
        $('#tour_1')
            .delay(5000).fadeOut('fast', function() {
        $('#tour_2')
            .fadeIn('fade').delay(5000).fadeOut('fast', function() {
        $('#tour_3')
            .fadeIn('fade').delay(5000).fadeOut('fast', function() {
        $('#tour_4')
            .fadeIn('fade').delay(5000).fadeOut('fast', function() {
                        $('#tour_modal').fadeOut('fast');
                        // END
                    });
                });
            });
        });
    }
    animateFramesTimer();

因此，我运行animateFramesTimer，如果单击某个按钮，我需要该功能停止工作，我尝试了一个while循环，这似乎是正确的路径，但它在浏览器中不断中断：（

var autoAnimate = true;
while(autoAnimate){
    // delay animation
}

你知道有什么更好的方法可以做到这一点吗？

$('[id^="tour_"]').stop(true, true); // kills current animations
animateFramesTimer = function() {};  // removes function
相关文章：