Javascript 创建全局settimeout变量

我正在使用jQuery和vanilla JavaScript的组合来制作一个滑块。我可能会尝试将其放到一个jQuery插件中，但我缺乏jQuery插件的知识，还没有学习它们

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

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

代码如下：

$(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);

这似乎没有清除超时。当我单击.slider箭头li或.slider.slide导航li时，超时显示为堆叠

任何帮助都将不胜感激。

您的$timeout变量当然是全局可访问的，因为您的代码中任何地方都没有使用var关键字。这意味着所有变量都是全局变量。这不是一个好的做法，但与这个问题无关

看起来您的问题实际上是，在nextSlide函数中，直到动画完成后才调用setTimeout。如果在动画完成之前再次调用该函数，则无需取消任何操作。然后两个动画都将完成，创建两个超时

您应该在设置超时之前立即调用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);
});

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