Кнопка "показать еще" AJAX

Question

$(function(){

    $('.load-more').on('click', function(){
        const btn = $(this);
        const loader = btn.find('spinner');
        $.ajax({
            url: '/data.html',
            type: 'GET',
            beforeSend: function () {
                btn.attr('disabed', true);
                loader.addClass('d-inline-block');
            },
            success: function(responce) {
                setTimeout(function(){
                    loader.removeClass('d-inline-block');
                    btn.attr('disabed', false);
                    $('.after-posts').before(responce);
                }, 1000)
            },
            error: function() {
                alert('ERROR!');
                loader.removeClass('d-inline-block');
                btn.attr('disabed', false);
            }
        });
    });

});

Не кидайтесь тапками) Подскажите как модернизировать код так, что бы подгружал информацию один раз и кнопка менялась на "свернуть", соответственно сворачивался контент, или этот код не подходит? Буду рад помощи.

Answer 1

Вам нужно внести переменную либо следить за текущим состоянием, но идея останется такой же.

$(function(){
    let requestStarted = false;
    $('.load-more').on('click', function(){
        const btn = $(this);
        const loader = btn.find('spinner');
        if(!requestStarted) {
          requestStarted = true;
          $.ajax({
            url: '/data.html',
            type: 'GET',
            beforeSend: function () {
                
                btn.attr('disabed', true);
                loader.addClass('d-inline-block');
            },
            success: function(responce) {
                requestStarted = false;
                setTimeout(function(){
                    loader.removeClass('d-inline-block');
                    btn.attr('disabed', false);
                    $('.after-posts').before(responce);
                }, 1000)
            },
            error: function() {
                requestStarted = false;
                alert('ERROR!');
                loader.removeClass('d-inline-block');
                btn.attr('disabed', false);
            }
        });
       } // end if req
    });

});

БЛОГ НА HUSL

Кнопка "показать еще" AJAX

Ответы (1 шт):