Как запретить выполнение действия при клике во время выполнения функции обратного вызова?

Для того чтобы запретить выполнение действия при клике во время выполнения функции обратного вызова, можно использовать флаг, который будет указывать, что функция уже выполняется. Например, перед выполнением функции устанавливать этот флаг в true, а по завершению работы функции - в false. При клике на элемент, который запускает функцию, можно проверять значение этого флага и если он равен true, то прерывать выполнение функции.

Для оптимизации работы кнопки "Показать еще" при одновременном переключении фильтров на странице, можно разделить код на подзадачи следующим образом:
1. Создать функцию, которая будет отвечать за получение данных (например, получение новой порции контента для отображения).
2. Создать функцию, которая будет отвечать за отображение полученных данных на странице.
3. Создать функцию, которая будет отвечать за обновление контента на странице при переключении фильтров.
4. Создать функцию, которая будет вызывать функцию получения данных при клике на кнопку "Показать еще".
5. Создать функцию, которая будет вызывать функцию обновления контента при переключении фильтров.

Таким образом, код будет разделен на логические блоки, что улучшит его структуру и облегчит понимание и поддержку вашего функционала.

let $grid = $('.card__list').isotope({
    itemSelector: '.card--small',
    transitionDuration: 0,
});

let showMoreBtn = document.querySelector('.js-load-more-btn');
let maxCardsToShow = 6;
let cardsToShow = 6;
let filteredItems = [];

function updateCardsDisplay() {
    filteredItems.forEach((item, index) => {
        if (index < maxCardsToShow) {
            item.element.style.display = 'flex';
        } else {
            item.element.style.display = 'none';
        }
    });
}

$grid.isotope('on', 'arrangeComplete', function(items) {
    filteredItems = items;
    maxCardsToShow = 6;
    updateCardsDisplay();
    showMoreBtn.style.display = (filteredItems.length > maxCardsToShow) ? 'block' : 'none';
});

showMoreBtn.addEventListener('click', () => {
    let cardLength = filteredItems.length;
    for (let i = maxCardsToShow; i < Math.min(maxCardsToShow + cardsToShow, cardLength); i++) {
        filteredItems[i].element.style.display = 'flex';
    }
    maxCardsToShow += cardsToShow;
    if (maxCardsToShow >= cardLength) {
        showMoreBtn.style.display = 'none';
    }
});