Ограничение работы скрипта

Question

Господа знатоки, подскажите пожалуйста. Есть скрипт, подвешен на кнопку, но некоторые пользователи жмут на нее несколько раз, видимо думают что это ярлык, в итоге скрипт выполняется несколько раз, есть ли возможность поставить ограничение, на количество нажатий или таймаута работы или проверку запущен ли скрипт?

Вот код:

display += "<a id = 'sss"+id+"' title='запрос' onClick=\"var xap = new XMLHttpRequest();xap.open('GET', 'https://test', true);xap.send(null);\" class='btn grey order' style='text-decoration: none; padding:2px 3px; font-size: 13px;'><font color='black'>запрос</font></a>";

Answer 1

Используйте булевый флаг

let flag = true; // Булевый флаг

document.querySelector('#btn').addEventListener('click', function() {
  if(flag === true) { // При нажатие выполняем проверку флага
    flag = false; // Ставим false, чтобы не выполнялся код при нажатие
    // Выполням ваш код
    console.info('click');
    setTimeout(function() {
      // Допустим ваш код выполнился, меняем флаг обратно на true, это нужно делать в конце, когда ваш код выполнится
      flag = true;
    }, 2000)
  }
});

<button id="btn">Жать можно только раз в 2 секунды</button>

@Алексей Шиманский подсказал ещё один интересный способ, использовать атрибут disabled.
Этот способ будет даже лучше, чем первый, т.к. не требует записывать ничего в переменную.

document.querySelector('#btn').addEventListener('click', function(e) {
  if(e.target.disabled === false) { // проверяем наличие disabled
    e.target.disabled = true; // Активируем disabled
    // Выполням ваш код
    console.info('click');
    setTimeout(function() {
      // Допустим ваш код выполнился, disabled на false, это нужно делать в конце, когда ваш код выполнится
      e.target.disabled = false;
    }, 2000)
  }
});

<button id="btn">Жать можно только раз в 2 секунды</button>

БЛОГ НА HUSL

Ограничение работы скрипта

Ответы (1 шт):