使用塊變量來停止運行多個事件

Question

我有一個jQuery滑塊，將通過圖像從左到右循環。 滑塊的左側和右側還有一些按鈕，用戶可以根據需要手動滾動圖像。

我遇到的問題是，如果多次單擊這些按鈕，圖像將滑出頁面，這是因爲在列表的左側屬性超出其邊界之前觸發事件。

我想用一個變量來阻止用戶能夠通過檢查當前動畫是否已經發生而觸發這些事件，但這些事件似乎仍然在觸發。這是一個可以顯示問題的工作jsFiddle。 http://jsfiddle.net/25tt5vmp/10/

這裏是jQuery的功能：

$(document).ready(function() { 


    var myTimer = setInterval(slide, 2000); 
    var blockedSlider = false; 

    function slide() { 
      var left = $('#sliderList').css('left'); 
      left = left.substring(0, left.length - 2); 
      if (left <= -800) { 


       $('#sliderList').css('left', '-400px'); 
       var slide = $('#sliderList li:first'); 
       $('#sliderList').children('li:first').remove(); 
       $('#sliderList').append(slide); 
       $('#sliderList').animate({ left: "-=400px" }, "slow", "swing"); 

      } 
      else { 
       $('#sliderList').animate({ left: "-=400" }, "slow", "swing"); 
      } 

    } 

    $('#sliderLeft').click(function() { 
     if (blockedSlider == false) { 
      blockedSlider = true; 
      var left = $('#sliderList').css('left'); 
      left = left.substring(0, left.length - 2); 
      if (left <= -800) { 
       $('#sliderList').css('left', '-400px'); 
       var slide = $('#sliderList li:first'); 
       $('#sliderList').children('li:first').remove(); 
       $('#sliderList').append(slide); 
       $('#sliderList').animate({ left: "-=400px" }, "slow", "swing"); 
       clearInterval(myTimer); 
       myTimer = setInterval(slide, 2000); 
      } 
      else { 
       $('#sliderList').animate({ left: "-=400" }, "slow", "swing"); 
       clearInterval(myTimer); 
       myTimer = setInterval(slide, 2000); 
      } 
      blockedSlider = false; 
     } 
    }); 

    $('#sliderRight').click(function() { 
     if (blockedSlider == false) { 
      blockedSlider = true; 
      var left = $('#sliderList').css('left'); 
      left = left.substring(0, left.length - 2); 
      if (left >= 0) { 
       $('#sliderList').css('left', '-400px'); 
       var slide = $('#sliderList li:last'); 
       $('#sliderList').children('li:last').remove(); 
       $('#sliderList').prepend(slide); 
       $('#sliderList').animate({ left: "+=400px" }, "slow", "swing"); 
       clearInterval(myTimer); 
       myTimer = setInterval(slide, 2000); 

      } 
      else { 
       $('#sliderList').animate({ left: "+=400" }, "slow", "swing"); 
       clearInterval(myTimer); 
       myTimer = setInterval(slide, 2000); 
      } 
      blockedSlider = false; 
     } 
    }); 

}); 

而我的HTML：

<div id="sliderOuterWrapper"> 
     <div id="sliderWrapper"> 

      <a id="sliderLeft" ><</a> 
      <a id="sliderRight" >></a> 
      <ul id="sliderList"> 
       <li class="sliderItem first"> 
        <div><img src="" /></div> 
       </li> 
       <li class="sliderItem second"> 
        <div><img src="" /></div> 
       </li> 
       <li class="sliderItem third"> 
        <div><img src="" /></div> 
       </li> 
       <li class="sliderItem fourth"> 
        <div><img src="" /></div> 
       </li> 
       <li class="sliderItem fifth"> 
        <div><img src="" /></div> 
       </li> 
      </ul> 

     </div> 
    </div> 

CSS：

* { margin: 0; padding: 0; } 
#sliderWrapper { width: 400px; height: 350px; overflow: hidden; position:relative;} 
#sliderList { list-style: none; left: 0px; position:absolute; width:200000em;} 
.sliderItem { float: left; background-color:black; width: 400px; height: 350px;} 
.sliderItem.first { background-color:red; } 
.sliderItem.second { background-color:blue; } 
.sliderItem.third { background-color:yellow; } 
.sliderItem.fourth { background-color:green; } 
#sliderLeft { position: absolute; font-size: 63px; top:39%; z-index: 10;} 
#sliderRight { position: absolute; font-size: 63px; top:39%; z-index: 10; right: 0px;} 
#sliderLeft:hover, 
#sliderRight:hover { cursor: pointer; } 

我如何阻止如果當前動畫射擊這些事件已經在發生？

Answer 1

請重新設置blockSlider爲假，在格蘭animate函數調用回

$('#sliderLeft').click(function() { 
     if (blockedSlider == false) { 
      blockedSlider = true; 
      var left = $('#sliderList').css('left'); 
      left = left.substring(0, left.length - 2); 
      if (left <= -800) { 
       $('#sliderList').css('left', '-400px'); 
       var slide = $('#sliderList li:first'); 
       $('#sliderList').children('li:first').remove(); 
       $('#sliderList').append(slide); 
       $('#sliderList').animate({ left: "-=400px" }, "slow", "swing",function(){ 
        blockedSlider = false 
       }); 
       clearInterval(myTimer); 
       myTimer = setInterval(slide, 2000); 
      } 
      else { 
       $('#sliderList').animate({ left: "-=400" }, "slow", "swing",function(){ 
        blockedSlider = false 
       }); 
       clearInterval(myTimer); 
       myTimer = setInterval(slide, 2000); 
      } 

     } 
    });