正しい値が得られていないonclick

Question

私はスライダーと左右2つのボタンを持っています 私はコードであなたを見せてくれるので、各ボタンのイベントハンドラーを持っています。

私はクリックして完了することへの移行を待ち、正常に動作しますeverthing、 私は高速の連続したクリックをクリックすると、私は予想通り（HTML怒鳴るに示すように）フロートが

番号は正確ではありません取得しています

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です：

これはJavascriptをとjQueryを一緒に混合し

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

</div> 

Answer 1

あなたは、コンテナのdivは、アニメーションを実行しているかどうかをテストするために、あなたのイベントリスナーに最初の行として:animatedセレクタを使用することができます：クリック時

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>