Я имею дело с унаследованным приложением, в котором они используют теги [a] для многих форм представления Ajax. Если бы мы использовали кнопки [input], мы могли бы просто установить атрибут disable тега [input]. Но по гиперссылкам отключение не является частью спецификации и не соответствует кросс-браузерному.

Мы ищем простое решение для блокировки лишних кликов по гиперссылке.

Примечание: мы используем JavaScript с jQuery

7
BuddyJoe 6 Июл 2010 в 20:50

6 ответов

Лучший ответ

Решение womp - очень и очень тщательный способ решения этой проблемы.

Однако, если вы хотите что-то немного проще, я бы, вероятно, реализовал семафор. Просто установите флаг «отправки» и проверьте, установлен ли семафор, когда пользователь щелкает ссылку. Вы можете сделать это, установив флаг на самом объекте DOM, или использовать глобальное логическое значение.

$('#link').each(function() {
    this.submitting = false;
}).click(function() {
    if (!this.submitting)
    {
        this.submitting = true;
        var self = this;
        $.ajax({
             success: function() {
                 self.submitting = false;
             },
             error:  function() {
                 self.submitting = false; // make sure they can try again
             }
        });
    }
});

Я явно сократил вызов $ .ajax, но я думаю, вы поняли.

Редактировать . Эээ ... на самом деле, забыл самую важную часть. Если (! Отправка).

7
Ryan Kinal 9 Июл 2010 в 00:49

Что происходит, когда по этим ссылкам выполняется запрос ajax? Если это так, вы можете посмотреть на это

http://www.protofunc.com/scripts/jquery/ajaxManager3/ ( не их версия 3.05 в хранилище, которое вы можете взять).

У этого есть опция, чтобы остановить двойные запросы ajax.

Также вы можете посмотреть

http://jquery.malsup.com/block/

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

1
chobo2 6 Июл 2010 в 19:52
var fooObj = {
    isAdd : true,
    add : function(){
        if(fooObj.isAdd == true){
            fooObj.isAdd = false;
            var opt = {
                url : 'http://yoururl.com',
                type : 'post',
                success : function(response){
                    if(response=='save'){
                        fooObj.isAdd = true;
                    }
                }
            }
            $.ajax(opt);    
        }
    }
}

Я думаю, что это работает. Я также замечаю, что IE Browser медленно реагирует на использование ajax.

0
adietan63 20 Мар 2012 в 00:25

Для всех событий, запускающих ajax-вызов, рекомендуется добавить загрузочный слой на родительский компонент или на всю страницу из первых рук, чтобы предотвратить новый триггер события, а с другой стороны, чтобы сообщить пользователю, что идет загрузка данных. , Вы можете сделать это, например, с помощью плагина jQuery BlockUI, который очень прост в реализации

1
Salim Hamidi 9 Сен 2016 в 08:20

В вашем обработчике "click" либо верните false, либо запретите default -

$('#target').click(function(e) {
  e.preventDefault();
  alert('Handler for .click() called.');
});

$('#target').click(function(e) {
  alert('Handler for .click() called.');
  return false;
});

Хм ... чтобы позволить кнопке нажиматься только один раз (на протяжении всей жизни страницы), тогда возможно использовать .data () -

http://api.jquery.com/data/

Или переключить атрибут.

4
Kris Krause 6 Июл 2010 в 16:58

Мне нравится процедура Бена Наделя для обработки этой,

По сути, вы создаете оболочку вокруг функции jQuery .ajax, и вы можете встраивать все, что происходит для каждого запроса ajax в вашем приложении. Одной из таких вещей является отслеживание запросов.

Вы увидите, что в его методе-оболочке getJSON он принимает необязательный параметр "name" для имени запроса. Это может быть что угодно, это просто ключ для определения источника запроса. В вашем случае он будет предоставляться при каждом нажатии ссылки. Если параметр name существует, он сохраняет его в коллекции отслеживания.

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

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

3
womp 6 Июл 2010 в 16:58