クリック時に正しい値が得られない

debugcn 投稿 Dev

Bouzaid

次のコードで示すように、スライダーと左右の2つのボタンがあります。各ボタンに2つのイベントハンドラーがあります。

クリックして遷移が完了するのを待つと、すべてが正常に機能しますが、高速の連続クリックをクリックすると、期待どおりに正確な数値がフロートされません（以下の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>

gaetanoM

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

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]