Javascript Delay/Sleep function

I am writing a vanilla javascript function to add a page scrolling animation to my website. The problem is that I want the event listener to pause for the specified millisecond time to give time for the animation to complete since if I scroll normally, the animation will happen multiple times one after the other.

/*  Event handler for scroll event  */

// This is a function which allows a time to be passed in miliseconds. This function will then cause a sleep effect for the specified ms time
function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

// Initial state
var iniState = 0;

// Adding scroll event
window.addEventListener('scroll', function(){
    // Detects new state and compares it with the old one
    if ((document.body.getBoundingClientRect()).top > iniState)
        console.log('up');
    else
        console.log('down');
    
    // Saves the new position for iteration.
    iniState = (document.body.getBoundingClientRect()).top;

    sleep(2000).then(() => { console.log("test"); });
});

I tried the timeout function, but this only delayed the event listener instead of pausing for the period of time. This is a link to the console in browser if that makes the problem easier to understand.

In summery, I am trying to make a event listener to listen for a scroll event, then wait 2000 milliseconds to wait for the animation to complete. After this the event listener will then start listening again for a scroll event again.

Answer

Just add the event listener, remove it after it’s called, then set a timeout to add it again.

function scrollHandler() {
    window.removeEventListener('scroll', scrollHandler);

    // Detects new state and compares it with the old one
    if ((document.body.getBoundingClientRect()).top > iniState)
        console.log('up');
    else
        console.log('down');
    
    // Saves the new position for iteration.
    iniState = (document.body.getBoundingClientRect()).top;

    setTimeout(() => window.addEventListener('scroll', scrollHandler), 2000);
}

window.addEventListener('scroll', scrollHandler);