js 防抖处理?

右下角有一个按钮来控制滑块位置, 具体代码如下

<style>
    #rollBtn .sc-box {
        bottom: 3rem;
        right: 3rem;
        background-color: rgba(var(--sc-primary-rgb), .5);
    }

    #rollBtn .sc-status-bottom {
        transform: rotate(180deg);
    }
</style>

<aside id="rollBtn">
    <div class="sc-box position-fixed d-inline-block rounded-circle cursor-pointer p-3 transition-500 waves-effect waves-dark">
        <img src="http://localhost:8002/assets/images/chevron-down.svg">
    </div>
</aside>

<script>
    function debounce(func, wait) {
        let timeout;
        return () => {
            clearTimeout(timeout);
            timeout = setTimeout(func, wait);
        }
    }

    $('#rollBtn .sc-box').click(() => {
        $("html").animate({
            scrollTop: 1000
        }, 1000);
    });
</script>

但是当用户连续点击的时候页面就会卡死, 这个情况可以怎么进行防抖优化?debounce 是原先封装的方法, 但这个方法并不适用这个需求debounce 是延迟执行, 也就是如果调这个方法传1秒, 那我点击这个按钮后1秒才开始执行里面的方法想稍微改一下, 变成先执行, 后延迟1秒 (先执行$("html").animate, 并且在执行1期间将$("html").animate 锁定1秒的时间)