글로벌 settimeout 변수 만들기

Question

저는 작업중인 슬라이더에 jQuery와 바닐라 자바 ​​스크립트 조합을 사용하고 있습니다. 아마도 이것을 하나의 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); 
    }); 
} 

가 nextSlide의 함수 내에서 다음 줄을 참조하십시오 :

clearTimeout($timeout); 

이 시간 제한을 취소하지 않는 것 여기

는 코드입니다. .slide-arrows li 또는 .slider .slide-nav li을 클릭하면 시간 초과가 스태킹 된 것처럼 보입니다.

도움을 주시면 감사하겠습니다.

Answer 1

귀하의 코드에 var 키워드를 사용하지 않으므로 귀하의 모든 변수와 마찬가지로 귀하의 $timeout 변수가 확실히 전역 적으로 액세스 할 수 있습니다. 이는 모든 변수가 전역 변수임을 의미합니다. (이것은 좋은 방법이 아닙니다,하지만이 질문에 관련이 없습니다.)

이 문제가 nextSlide 기능에 실제로 보인다는 setTimeout은 당신의 animate 완료 될 때까지 호출되지 않습니다. animate가 완료되기 전에 함수를 다시 호출하면 취소 할 것이 없습니다. 그런 다음 두 애니메이션이 완료되어 두 개의 시간 초과가 생성됩니다. 이 제한 시간이 새로운 시간 제한을 만들기 전에 취소되어 있는지 확인합니다

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

: 당신이 무엇을해야

는 제한 시간을 설정하기 전에 즉시 clearTimeout를 호출합니다.