Блог

Главная - Вопросы по программированию - Как предотвратить выполнение события до тех пор, пока не будет завершен последний вызов

Как предотвратить выполнение события до тех пор, пока не будет завершен последний вызов

#jquery

#jquery

Вопрос:

У меня есть это событие jQuery:

 $('#button-next').bind('click', function() {
    $.ajax({
        type: "GET",
        dataType: "json",
        url: 'index.php?route=product/category/displayamp;cat=anyamp;limit=' p ',1',
        cache: false,
        success: function(data) {
            var text = data.output;
            goForward('scroller', text);
            p  ;
        }
    });
});

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

Ответ №1:

Вы можете использовать этот .one() метод для подписки на действие щелчка:

 $('#button-next').one('click', process);

где вы могли бы определить process функцию следующим образом:

 function process() {
    $.ajax({
        type: 'GET',
        dataType: 'json',
        url: 'index.php',
        cache: false,
        data: { 
            route: 'product/category/display', 
            cat: 'any', 
            limit: p   ',1' 
        },
        success: function(data) {
            var text = data.output;
            goForward('scroller', text);
            p  ;
            // we rebind the click event once again
            $('#button-next').one('click', process);
        }
    });
}

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

1. Вместо $('#button-next').click(function() этого вы можете использовать $('#button-next').one('click', function() . Это делает ненужным отмену привязки и экономит одну строку

2. @topek, отличная идея. Я обновил свой пост, чтобы учесть ваш комментарий. Спасибо, что указали на это.

Ответ №2:

Отключите кнопку при нажатии и включите ее после завершения ajax

             $('#button-next').bind('click', function() {
                $('#button-next').attr('disabled', 'disabled');
                $.ajax({
                    type: "GET",
                    dataType: "json",
                    url: 'index.php?route=product/category/displayamp;cat=anyamp;limit=' p ',1',
                    cache: false,

                    success: function(data) {
                            $('#button-next').removeAttr('disabled')
                            var text = data.output;
                            goForward('scroller', text);
                            p  ;
                    }
                });
            });
Метки: