使用块变量来停止运行多个事件

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

     } 
    });