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

使用playSlideshow方法和用户clearInterval()的时间间隔引用将其停在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);

}