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

Question

我有下面的代码，它改变了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; 
      }; 
    }; 

这工作过，直到somepoint。它会更改“已暂停”的值，但不会在单击该按钮后停止执行PlaySlide()或NavigateSlide()函数。

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

Answer 1

你需要停止你的时间间隔暂停：

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