Stop specific function execution in jQuery/JavaScript

Question

I've got the following code which changes the background of a page with jQuery. I've got buttons for next, previous, and play/pause. It works really well like this:

<script type="text/javascript">
var imageSet = ["1.JPG", "2.JPG", "3.JPG", "4.JPG", "5.JPG", "6.JPG"];
var currentImageSet = 0;

function changeBackgroundImages() {
    img2Fade();
    setTimeout(img1Fade, 5000);
}

function img1Fade(){
    $('#back-img1').css({background: 'url(./img/bgimgs/small/' + imageSet[++currentImageSet] + ')'});
    $('#back-img1').ready( function() { 
        $('#back-img1').fadeIn('slow');
        $('#back-img2').fadeOut('slow');
        if (currentImageSet >= imageSet.length - 1) {
                currentImageSet -= imageSet.length;
            };
    });
}

function img2Fade(){
    $('#back-img2').css({background: 'url(./img/bgimgs/small/' + imageSet[++currentImageSet] + ')'});
    $('#back-img2').ready( function() { 
        $('#back-img2').fadeIn('slow');
        $('#back-img1').fadeOut('slow');
        if (currentImageSet >= imageSet.length - 1) {
                currentImageSet -= imageSet.length;
            };
    });
};

function PlaySlide () {
    setInterval(changeBackgroundImages, 10000);
};

function NavigateSlide () {
    $('#prev-arrow').click(function() {
        var back1display = $( '#back-img1' ).css( "display" );
        var back2display = $( '#back-img2' ).css( "display" );
        if(back1display == 'block'){
                if (currentImageSet <= 0) {
                        currentImageSet = imageSet.length-1;
                    };
            $('#back-img2').css({background: 'url(./img/bgimgs/small/' + imageSet[--currentImageSet] + ')'});
            $('#back-img2').ready( function() { 
                $('#back-img2').fadeIn('slow');
                $('#back-img1').fadeOut('slow');
            });
        } else if (back2display == 'block'){
                if (currentImageSet <= 0) {
                        currentImageSet = imageSet.length-1;
                    };
            $('#back-img1').css({background: 'url(./img/bgimgs/small/' + imageSet[--currentImageSet] + ')'});
            $('#back-img1').ready( function() { 
                $('#back-img1').fadeIn('slow');
                $('#back-img2').fadeOut('slow');
            });
        };
    });
    $( '#next-arrow' ).click(function() {
        var back1display = $( '#back-img1' ).css( "display" );
        var back2display = $( '#back-img2' ).css( "display" );
        if(back1display == 'block'){
            img2Fade();
        } else if (back2display == 'block'){
            img1Fade();
        };
    });
};

$(document).ready(function(){
    var paused = 0;

    if(paused == 0) {
        PlaySlide ();
    } else if (paused == 1) {
        NavigateSlide ();
    };
});
</script>

That is if I write in the code the value of "paused" to 0 or 1. My problems start when I try to change the value of "paused" with the click event on the Play/Pause button. For that I have the following code in the document ready function:

$('#play-btn').click(function(){ 
        paused = pause();
        if(paused == "0") {
            $('#jQuery_log').html( "Slideshow playing | pause = " + paused )
            PlaySlide ();
        } else if(paused == "1")  {
            $('#jQuery_log').html( "Slideshow paused | pause = " + paused )
            NavigateSlide ();
        };
    });

And the pause () function:

function pause() { 
          if (paused == 0) {
              $('#gal-play').css({background: 'url(./img/other_resources/gal_play.png)'});
              return 1;
          } else if (paused == 1) {
              $('#gal-play').css({background: 'url(./img/other_resources/gal_pause.png)'});
              return 0;
          };
    };

This works too, until somepoint. It changes the values of "paused" but it doesn't stop the execution of PlaySlide () or NavigateSlide () functions after clicking the button.

Can anyone suggest a good approach on this?

Answer 1

You need to stop your interval to pause it:

var play;
function PlaySlide () {
    play = setInterval(changeBackgroundImages, 10000);
};
function StopSlide () {
    clearInterval(play);
};