Использование переменной блока для остановки множества событий

Question

У меня есть ползунок jQuery, который будет циклически перемещаться по изображениям слева направо. Есть также кнопки с левой и правой стороны ползунка, которые позволят пользователю прокручивать изображения вручную, если они захотят.

Проблема, с которой я сталкиваюсь, заключается в том, что если эти кнопки будут нажаты несколько раз, изображения соскользнут со страницы, это связано с тем, что события активируются до того, как свойство left из списка выходит за пределы его.

Я пытаюсь использовать переменную, чтобы заблокировать пользователя, способного запускать эти события, проверяя, действительно ли текущая анимация уже имеет место, но события все еще, похоже, срабатывают. Вот рабочий 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 ложь в вызове функции Teh одушевленного назад

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

     } 
    });