在 jQuery/JavaScript 中停止特定函数的执行答案

【问题标题】：Stop specific function execution in jQuery/JavaScript在 jQuery/JavaScript 中停止特定函数的执行
【发布时间】：2013-10-20 19:15:35
【问题描述】：

我有以下代码，它使用 jQuery 更改页面的背景。我有下一个、上一个和播放/暂停的按钮。它像这样工作得非常好：

<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>

也就是说，如果我在代码中将“暂停”的值写入 0 或 1。当我尝试使用播放/暂停按钮上的单击事件更改“暂停”的值时，我的问题就开始了。为此，我在文档就绪函数中有以下代码：

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

还有pause () 函数：

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

这也有效，直到某个时候。它会更改“暂停”的值，但不会在单击按钮后停止执行 PlaySlide () 或 NavigateSlide () 函数。

任何人都可以提出一个好的方法吗？

【问题讨论】：

标签： javascript jquery background

【解决方案1】：

你需要停止你的间隔来暂停它：

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

【讨论】：