idea

Debouncer is a pattern^[1] that holds on processing an event for a while, so that if the event is received multiple times, it's processed only once. Debouncer is called only after events stop being received.

The problem with debouncing is that it introduces a delay between receiving events and processing them. A better alternative when possible is to process the event right away, and then ignore subsequent calls for a while.

links

Act on press - Standard implementation is introducing even more delay in interfaces.

reference

[1]: Implementation in Debouncing in Javascript:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="debounce">
        Debounce
    </button>
    <script>
        let button = document.getElementById("debounce");
        const debounce = (func, delay) => {
            let debounceTimer
            return function () {
                const context = this
                const args = arguments
                clearTimeout(debounceTimer)
                debounceTimer
                    = setTimeout(() => func.apply(context, args), delay)
            }
        }
        button.addEventListener('click', debounce(function () {
            alert("Hello\nNo matter how many times you" +
                "click the debounce button, I get " +
                "executed once every 3 seconds!!")
        }, 3000));
    </script>
</body>

</html>