JavaScript избежать многократного вызова

Question

Моя проблема здесь в том, что я хочу избежать вызова функции javascript в течение определенного периода времени (скажем, через 5 секунд) после ее вызова.

Я создал ссылку, которая вызывает функцию javascript. И если пользователь дважды щелкает ее, она вызывается дважды, и я хочу этого избежать.

Спасибо, Деван

Answer 1

Я думаю, что самый разумный способ справиться с этим - отключить ссылку, когда она нажата, а затем снова включить ее, когда функция будет завершена.Предполагая, что у вас есть jQuery, что-то вроде ...

$('#button').click(function () {
  $(this).attr("disabled", "true");
  doTheFunction();
  $(this).attr("disabled", "false");
});

Если вам действительно нужно подождать некоторое время после вызова функции, то вы можете использовать setTimeout для повторного включения кнопки.

$('#button').click(function () {
  $(this).attr("disabled", "true");
  doTheFunction();
  var btn = $(this);
  setTimeout(function () {
    btn.attr("disabled", "false");
  }, 5000);  // reenable the button 5 seconds later
});

РЕДАКТИРОВАТЬ: (для комментария ниже)

Для ссылки, я бы смоделировал выше, добавив и удалив класс, так как вы правы, нет отключенного атрибута.

$('#link').click(function () {
  if ($(this).hasClass('disabled_link')) {
    return;
  }
  $(this).addClass("disabled_link");
  doTheFunction();
  var link = $(this);
  setTimeout(function () {
    link.removeClass("disabled_link");
  }, 5000);  // reenable the button 5 seconds later
});

Answer 2

Поскольку вы используете ссылку, а не кнопку и не jQuery (по-видимому), вот как остановить функцию, выполняющую что-либо на 5 секунд (или любую задержку, которую вы хотите) после того, как она была вызвана и что-то сделала:

var someFn = (function() {

  var lastCalled;

  return function() {
    var now = new Date();
    var limit = 5000; // minimum milliseconds between calls

    if (!lastCalled || (now - lastCalled) > limit) {
      lastCalled = now;
      // do stuff
      alert('hey');
    } else {
      return;
    }
  }
}());

Подобные вещи обычно обрабатываются на сервере, поскольку клиентские сценарии не особенно надежны - вы не можете гарантировать, что программа будет реализована независимо от используемой стратегии.