не получает правильное значение onclick

Question

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

, когда я нажимаю и ждать перехода будет завершен, Everthing работает отлично, , но когда я нажимаю быстрые последовательные щелчки, я получаю поплавок не точные цифры, как ожидается, (как показано в HTML сильфона)

это Javascript и Jquery смешивают вместе:

var left = document.getElementById("left"); 
var right = document.getElementById("right"); 
var container = document.getElementById("container"); 


    left.addEventListener("click", function(){ 
     var marginLeft = container.style.marginLeft; 
     var parsedMarginLeft = parseInt(marginLeft); 
     console.log(parsedMarginLeft); 
     if(parsedMarginLeft > -800) { 
      $('#container').animate({marginLeft: '-=200px'}, 0); 
     } 
    }); 



    right.addEventListener("click", function(){ 
     var marginLeft = container.style.marginLeft; 
     var parsedMarginLeft = parseInt(marginLeft); 
     console.log(parsedMarginLeft); 

     if(parsedMarginLeft < 0) { 
      $('#container').animate({marginLeft: '+=200px'}, 0); 
     } 
    }); 

и это HTML я получаю после кликов:

<div id="container" style="width: 1800px; margin-left: -127.879px;"> 

</div> 

Answer 1

Вы можете использовать селектор :animated как первой линии в ваших слушателей событий, чтобы проверить, если контейнер DIV работает анимация:

var left = document.getElementById("left"); 
 
var right = document.getElementById("right"); 
 
var container = document.getElementById("container"); 
 

 

 
left.addEventListener("click", function(){ 
 
    if ($('#container:animated').length == 0) { 
 
    var marginLeft = container.style.marginLeft; 
 
    var parsedMarginLeft = parseInt(marginLeft); 
 
    console.log(parsedMarginLeft); 
 
    if(parsedMarginLeft > -800) { 
 
     $('#container').stop().animate({marginLeft: '-=200px'}, 0); 
 
    } 
 
    } 
 
}); 
 

 

 

 
right.addEventListener("click", function(){ 
 
    if ($('#container:animated').length == 0) { 
 
    var marginLeft = container.style.marginLeft; 
 
    var parsedMarginLeft = parseInt(marginLeft); 
 
    console.log(parsedMarginLeft); 
 

 
    if (parsedMarginLeft < 0) { 
 
     $('#container').animate({marginLeft: '+=200px'}, 0); 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<button id="left">left</button> 
 
<button id="right">right</button> 
 
<div id="container" style="width: 1800px; margin-left: 0px;background-color: red;"> 
 
aaaaaaaaaaaaaaaaa 
 
</div>