javascript избегает множественного вызова

#javascript #function

#javascript #функция

Вопрос:

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

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

Спасибо, Devan

Ответ №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
});
  

Комментарии:

1. я использую тег <a></a> для вызова функции. и я думаю, что у тега <a> нет атрибута disable. Поправьте меня, если я ошибаюсь.

Ответ №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;
    }
  }
}());
  

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