Как мы можем предотвратить повторное нажатие кнопки в течение определенного времени c в JavaScript? - PullRequest
Новая
       6

Как мы можем предотвратить повторное нажатие кнопки в течение определенного времени c в JavaScript?

0 голосов
/ 09 апреля 2020

Так что в коде нажатие кнопки оживит красную рамку. Нажатие на кнопку переместит ее по диагонали. но если мы снова нажмем кнопку во время анимации или нажмем на нее несколько раз, это даст мерцающий эффект. Как мы это исправим? 

<!DOCTYPE html>
<html>
<style>
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}
</style>
<body>

<p><button onclick="myMove()">Click Me</button></p> 

<div id ="container">
  <div id ="animate"></div>
</div>

<script>
function myMove() {
  var elem = document.getElementById("animate");   
  var pos = 0;
  var id = setInterval(frame, 5);
  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos++; 
      elem.style.top = pos + "px"; 
      elem.style.left = pos + "px"; 
    }
  }
}
</script>

</body>
</html>

Ответы [ 2 ]

3 голосов
/ 09 апреля 2020

Вам нужно установить флаг, когда анимация выполняется, и не выполнять функцию, когда она все еще выполняется 

var animationInProgress = false;

function myMove() {
  if (animationInProgress) {
    return;
  }

  var elem = document.getElementById("animate");
  var pos = 0;
  var id = setInterval(frame, 5);
  animationInProgress = true;

  function frame() {
    if (pos == 350) {
      animationInProgress = false;
      clearInterval(id);
    } else {
      pos++;
      elem.style.top = pos + "px";
      elem.style.left = pos + "px";
    }
  }
}
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}

#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}
<p><button onclick="myMove()">Click Me</button></p>

<div id="container">
  <div id="animate"></div>
</div>
1 голос
/ 09 апреля 2020

Я могу придумать два способа:

Первый - отключить кнопку и создать таймер (setTimeout), чтобы снова включить ее

Второй - сохранить время второго клика, и проверьте ваш обработчик кликов, если еще один клик произойдет слишком рано (используя сохраненное время второго клика).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...