Загрузка одной страницы много раз

Рейтинг: 0Ответов: 1Опубликовано: 19.02.2015

При быстром многократном нажатии загружается одна страница много раз:

Скрипт асинхронной загрузки

jQuery(function($){
    $('#true_loadmore').click(function(){
        $(this).text('Загружаю...'); // изменяем текст кнопки, вы также можете добавить прелоадер
        var data = {
            'action': 'loadmore',
            'query': true_posts,
            'page' : current_page
        };
        $.ajax({
            url:ajaxurl, // обработчик
            data:data, // данные
            type:'POST', // тип запроса
            success:function(data){
                if( data ) { 
                    $('#true_loadmore').text('Загрузить ещё').before(data); // вставляем новые посты
                    current_page++; // увеличиваем номер страницы на единицу
                    if (currentPage == maxPages) $("#true_loadmore").remove(); // если последняя страница, удаляем кнопку
                } else {
                    $('#true_loadmore').remove(); // если мы дошли до последней страницы постов, скроем кнопку
                }
            }
        });
    });
});

Как в самом начале AJAX-запроса добавлять класс (к body или к кнопке), после выполнения запроса удалить его?

То есть перед нажатием кнопки проверить наличие класса. Если класс есть (т.е. предыдущий запрос не выполнен до конца), то ничего не делаем и насколько это правильный подход ?

ajax
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Просто используйте disabled для submit-кнопки, что пользователь не мог нажать на неё пока запрос не завершится.

html:

<div id="true_loadmore">OK</div>

js:

$('#true_loadmore').click(function(){
    var $el = $(this);
    
    $el.prop("disabled", true);    
    /*
        jQuery (< 1.7):        
        $el.attr('disabled', true);                
    */
    $el.text('Загружаю...');
    
    $.ajax({
        url: '/echo/json/', 
        type: 'POST',      
        cache: false,
        success: function(data){     
            $el.text('Загрузить ещё');
        }           
    })
    .always(function() {
        /*
            jQuery (< 1.7):        
            $el.attr('disabled', false);
        */
        $el.prop("disabled", false);
    });   
});

Смотрите результат

P.S. В целях оптимизации, кэшируйте элемент в переменную $el.

UPDATE #1

Вариант с preloader:

html:

<div id="true_loadmore">Загрузить ещё</div>
<div class="preloader">Загружается...</div>

css:

.preloader {
    display: none;
}

js:

$('#true_loadmore').click(function(){
    var $el = $(this),
        $preloader = $('.preloader');    
    $.ajax({
        url: '/echo/json/', 
        type: 'POST',      
        cache: false,
        beforeSend: function( ) {
            $el.hide(); 
            $preloader.show();
        },
        success: function(data){     
        }           
    })
    .complete(function() {
        $preloader.hide();
        $el.show();           
    });   
});

Смотрите

UPDATE #2

$.ajax({
    url: '/echo/json/', 
    type: 'POST',      
    cache: false,
    beforeSend: function( ) {
        $el.hide(); 
        $preloader.show();
    },
    success: function(data){             
        if(!data) {  
            return;
        }
        current_page++; 
        if (currentPage == maxPages) {
            return;
        }                    
        $el.show().before(data);                                
    }           
})
.complete(function() {
    $preloader.hide();          
});