Let them eat cake

I think I have this figured out. The debounce function. Here is the code:

const debounce = (func, delay) => {
    let timer; // This will store the timer ID

    return (...args) => {
        clearTimeout(timer); // Clears any existing timer
        timer = setTimeout(() => func(...args), delay); // Sets a new timer
    };
};

I opted for an arrow function to achieve a more streamlined design. The variable `timer` is stored within the closure of the returned function, allowing it to persist between calls and effectively track the last timer. Each time the function is invoked, `clearTimeout(timer)` cancels any previously scheduled execution. This mechanism prevents the function from running if the user continues to trigger it. The next line, `setTimeout(() => func(…args), delay)`, initiates a new timer. The function `func` will only execute once the specified delay (in milliseconds) has elapsed without any further calls. The `(…args)` syntax enables the returned function to accept a variable number of arguments, which are passed to `func` upon its eventual execution. A traditional function would appear as follows:

function debounce(func, delay) {
    let timer;
    return function (...args) {
        clearTimeout(timer); // Clears any existing timer
        timer = setTimeout(() => func.apply(this, args), delay); // Sets a new timer
    };
}

The debounce function serves to wrap the original function (func) and manage its execution. Whenever the function is invoked, it clears any previously set timeouts and establishes a new timeout that waits for a specified number of milliseconds (delay). If the function is not called again within this delay period, func is then executed. The output in the console appears as follows:

const input = document.querySelector("#search");
input.addEventListener("input", debounce((event) => {
    console.log("Search Query:", event.target.value);
}, 500));

I find this quite confusing. The console.log is considerably more complex, and the debounce function is merely a small part of a larger codebase.

I need to head out now. I’m accompanying Kel and Alex to their dentist appointment, as I also need to be in the city to visit Costco. I plan to order Lexi’s birthday cake for Saturday. Once I’m back, I’ll take some time to study the debounce function further. Google has been quite helpful with coding, though I still feel a bit puzzled by it all.

Tommy has band practice tonight. They are getting ready for a concert that is coming up.

I’m back home now. I ordered the cake, and we’ll pick it up on Saturday. Lexi has requested pizza for her birthday dinner. Unfortunately, Kel’s dad had to be taken to the hospital due to being incoherent and a high fever, so Kel is with him there.

The girls and I are starting to prepare dinner. Kel picked up some lumpia from Costco, so we’re having that along with rice. I’m about to get some dinner and watch something on my computer.