Блог

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

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

Вы можете использовать селектор :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>