클릭 이벤트 후 jQuery 함수 실행 중지

Question

다음은 작동하지만 '$ ('. js-slideshow span ')'을 클릭하면 'playSlideshow()'가 중지됩니다.

$("img.clickable").click(function(e){// showing and hiding property images 
    e.stopPropagation(); 
    $('.js-slideshow span').delay(500).fadeIn(); 
    var $window = $(window); 
    var $windowWidth = $(window).width(); 
    var clickableImage = $(this); 
    var clickableImageRightPx = clickableImage.css('right'); 
    var clickableImageRightInt = parseInt(clickableImageRightPx , 10); 

    if (clickableImageRightInt == -108) { 
     playSlideshow();    
    } 

}); 

$('.js-slideshow span').click(function(){ 
    $(this).fadeOut(function(){ 
     $('.showImg').removeClass("showImg"); 
      // stop playSlideshow(); 
    }); 
}); 

function playSlideshow(){ 

    $(".js-slideshow > img:gt(0)").delay(500).fadeOut(); 

    setInterval(function() { 
     $('.js-slideshow > img:first') 
     .fadeOut(1000) 
     .next() 
     .fadeIn(1000) 
     .end() 
     .appendTo('.js-slideshow');}, 3000); 

     } 

} 

Answer 1

는 함수 외부에서 기능을 중지 할 방법이없는 js-slideshow span 클릭 핸들러

$('.js-slideshow span').click(function() { 
    clearInterval(slideshowInteval) 
    $(this).fadeOut(function() { 
     $('.showImg').removeClass("showImg"); 
     // stop playSlideshow(); 
    }); 
}); 

var slideshowInteval; 

function playSlideshow() { 

    $(".js-slideshow > img:gt(0)").delay(500).fadeOut(); 

    slideshowInteval = setInterval(function() { 
     $('.js-slideshow > img:first') 
      .fadeOut(1000) 
      .next() 
      .fadeIn(1000) 
      .end() 
      .appendTo('.js-slideshow'); 
    }, 3000); 

}