вызвать функцию не чаще одного раза в 3 сеекуннд

Цитата

При клике вызывается функция которая меняет слайд. Изменение слайда происходить с анимацией где то 1-2 сек. И получается так что если пользователь несколько раз подряд кликнет то если он перестанет кликать будут еще выполняться предыдущие клики. Не знаю. как правильно сформировать вопрос, примерно нужно сделать так чтобы после первого клика второй работал когда слайд изменился, а клики которые были сделаны во время когда слайд меняйся не работали

$('#slider')
        .css({
            width: '80%',
            margin: 'auto'
        })
        .append(`<div id="slide"></div>`)
        .append(`<div id="progress-bar"></div>`)
        .click(function(event) {
            changeBackground(event.pageX > $('body').width() / 2 ? 1 : -1)
        });

    let i = 1;
    function changeBackground(dir) {
       
            clearInterval(myInterval);
            widthPercent += widthPercentAdd * dir;
            i += dir;
            if (i > 5) {
                i = 1;
                widthPercent = widthPercentAdd;
            };
            if (i < 1) {
                i = 5;
                widthPercent = 100;
            };
            $('#slide')
            .fadeOut(() => {
                $('#slide').css({
                    background: `url("img/${i}.png") center/cover`,
                })
            })
            .fadeIn();
            $('#progress-bar__item').css({
                width: `${widthPercent}%`,  
            });
            changeCount();
            myInterval = setInterval(myTimer, 3000);
        
    };