创建全局设置超时变量

Creating global settimeout variable

本文关键字：变量 超时 全局设置 创建      更新时间：2023-09-26

我正在使用jQuery和vanilla JavaScript的组合来制作我正在处理的滑块。我可能会尝试将其放入单个jQuery插件中，但我缺乏jQuery插件的知识，并且尚未学习它们。

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

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

这是代码：

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

请参阅下一个幻灯片函数中的以下行：

clearTimeout($timeout);

这似乎没有清除超时。当我单击.slide-arrows li或.slider .slide-nav li时，超时似乎正在堆叠。

任何帮助将不胜感激。

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

似乎您的问题实际上是在nextSlide函数中，在animate完成之前不会调用setTimeout。 如果在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);
});

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

相关文章：