jQuery stop a function running after click event

Question

The following works but I would like the 'playSlideshow()' to stop once I click on '$('.js-slideshow span')'?

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

       }

 }

There is no way to stop a function from outside the function. Please provide more information about what playSlideshow() is. — smdrager
– smdrager, Commented Feb 13, 2014 at 16:12
Agree with @smdrager. This is possible if playSlideshow is calling another function on some interval using setInterval, but we don't know unless we see playSlideshow. — Zhihao
– Zhihao, Commented Feb 13, 2014 at 16:14

Arun P Johny · Accepted Answer · 2014-02-13 16:15:09Z

1

Use the interval reference from the playSlideshow method and user clearInterval() to stop it in the js-slideshow span click handler

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

}

answered Feb 13, 2014 at 16:15

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery stop a function running after click event

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related