Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Как предотвратить двойное нажатие на элемент. (https://javascript.ru/forum/events/75134-kak-predotvratit-dvojjnoe-nazhatie-na-ehlement.html)

finlolo 05.09.2018 11:29

Как предотвратить двойное нажатие на элемент.
 
Всем привет.

Есть кнопки и разные блоки, при нажатии на которые, происходит вызов функции. Например так:

Код:

var fin = document.querySelector('#infinish');
        fin.onmouseup= function()  {
        reversShow();
}

Или так:
Код:

var fin = document.querySelector('#infinish');
        fin.onclick= function()  {
        reversShow();
}

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

Dilettante_Pro 05.09.2018 15:01

Повторный клик срабатывает не чаще, чем через 2 секунды
<button id="infinish">Finish</button>
<script>
var flag = true;
var fin = document.querySelector('#infinish');
        fin.onmouseup= function()  {
           if(flag) reversShow();
           flag = false;
}
function reversShow() {
      console.log('Start'); //запуск анимации
      setTimeout('flag = true;',2000);

}
</script>

Dilettante_Pro 05.09.2018 15:09

Или еще радикальней
<button id="infinish">Finish</button>
<script>

var fin = document.querySelector('#infinish');
        fin.onmouseup= function()  {
           reversShow();
           this.style.display='none';
}
function reversShow() {
      console.log('Start'); //запуск анимации
      setTimeout('fin.style.display="block";',2000);

}
</script>


Часовой пояс GMT +3, время: 09:50.