Question

我正在使用jQuery和vanilla JavaScript的组合作为我正在使用的滑块。我可能会尝试把它放到一个jQuery插件中，但我不了解jQuery插件，还没有学习它们。

我遇到的问题是，我的settimeout变量似乎不是jQuery和vanilla函数的全局变量。

这是一个问题，因为我需要能够在某些情况下清除超时。示例：当用户单击导航按钮或箭头时，应清除当前超时并重新开始。

以下是代码：

$(document).ready(function () {

    /* slider */

    if ($('.slider').length)
    {
        // setttings
        $caption_speed = 500;
        $slide_speed = 5000;

        // get slider height (px)
        $height = $('.slider .slides').outerHeight();

        // set top of all captions to slider height so they can be animated upwards
        $('.slider .slides li .caption').css('top', $height+'px');

        // get total slides
        $slides = $('.slider .slides li').length - 1;
        $active = 0;

        // show first slide caption
        captionActive($active, $caption_speed);
        $timeout = setTimeout(function () { nextSlide('right', $slides, $height, $caption_speed, $slide_speed, 'null'); }, $slide_speed);

        // pause slider if person mouses over caption, arrows, or nav
        $('.slider .slides li .caption, .slider .slide-arrows li, .slider .slide-nav').mouseover(function () {
            clearTimeout($timeout);
        });
        $('.slider .slides li .caption, .slider .slide-arrows li, .slider .slide-nav').mouseout(function () {
            $timeout = setTimeout(function () { nextSlide('right', $slides, $height, $caption_speed, $slide_speed, 'null'); }, $slide_speed);
        });

        // do arrow actions when clicked
        $('.slide-arrows li').click(function () {
            $direction = $(this).attr('class');
            nextSlide($direction, $slides, $height, $caption_speed, $slide_speed, 'null');
        });

        // do nav actions when clicked
        $('.slider .slide-nav li').click(function () {
            $number = $(this).index();
            nextSlide('right', $slides, $height, $caption_speed, $slide_speed, $number);
        });
    }

});

function captionActive (active, caption_speed) 
{
    $caption = $('.slider .slides li:eq('+active+') .caption');
    $cheight = $caption.outerHeight();
    $top = ($height - $cheight) / 2;        
    $caption.animate({opacity: 1, top: $top}, caption_speed, function () {});
    $('.slider .slide-nav li:eq('+active+')').addClass('active');       
}

function nextSlide (direction, slides, height, caption_speed, slide_speed, next)
{
    clearTimeout($timeout);

    // get active slide #
    $active = $('.slider .slide-nav .active').index();
    $active_slide = $('.slider .slides li:eq('+($active)+')');
    $('.slider .slide-nav .active').removeClass('active');

    if (next != 'null')
        $next = next;
    else if (direction == 'left')       
        $next = $active - 1;
    else
        $next = $active + 1;

    // check if next exists, otherwise make first next
    if (!$('.slider .slides li:eq('+($next)+')').length)
        $next = 0;  

    $next_slide = $('.slider .slides li:eq('+($next)+')');
    $next_slide.css('z-index', '99');

    // fade out caption
    $caption = $('.slider .slides li:eq('+$active+') .caption');
    $caption.animate({opacity: 0, top: height}, caption_speed, function () {});
    $active_slide.animate({opacity: 0}, caption_speed, function () {
        $active_slide.css({'z-index' : '0', 'opacity' : '100'});
        $next_slide.css('z-index', '100');
        // fade in new caption & set nav element active
        captionActive($next, caption_speed);
        $timeout = setTimeout(function () { nextSlide('right', slides, height, caption_speed, slide_speed, 'null'); }, slide_speed);
    });
}

请参阅nextSlide函数中的以下行：

clearTimeout($timeout);

这似乎没有消除超时。点击.slide-arrows li或.slider .slide-nav li时，超时似乎正在堆叠。

非常感谢任何帮助。

Answer 1

您的$timeout变量肯定可以全局访问 - 与所有变量一样 - 因为代码中的任何位置都没有使用var关键字。这意味着您的所有变量都是全局的。（这不是一个好习惯，但与这个问题无关。）

看来你的问题实际上是在你的nextSlide函数中，setTimeout在animate完成之前不会被调用。如果在animate完成之前再次调用该函数，则无需取消任何内容。然后两个动画都将完成，创建两个超时。

您应该做的是在设置超时前立即致电clearTimeout：

$active_slide.animate({opacity: 0}, caption_speed, function () {
    /* ... */

    if($timeout) clearTimeout($timeout);

    $timeout = setTimeout(function () { nextSlide('right', slides, height, caption_speed, slide_speed, 'null'); }, slide_speed);
});

这将确保在创建新超时之前清除超时。

创建全局settimeout变量

1 个答案: