Search code examples
javascriptthrottlingdebouncing

Is this case for debounce correct?

I practiced a debounce on bigfrontend, there is an example in the stem of the question, each dash represents the waiting time, the question is about the following

enter image description here

The question is https://bigfrontend.dev/problem/implement-basic-debounce

My understanding is that each time the event timer is executed will be retimed, then for the E event, why the F event is not executed, while the G event is executed, is my understanding of the problem is wrong?

I want to know if my understanding is wrong.

Solution

  • I think the graphical representation is misleading. The letters in that representation should not take extra horizontal space as if a "dash" time unit had passed. So it would be better represented like this:

    ─A─B─C─ ─D─ ─ ─ ─ ─ ─E─ ─F─G─ ─ ─ ─ (without debouncing)
─ ─ ─ ─ ─ ─ ─ ─D─ ─ ─ ─ ─ ─ ─ ─ ─G─ (with    debouncing)
         │     ▲           │     ▲
         └─────┘           └─────┘    
            +3                +3

    So now we see that G is triggered 3 dashes later than in the original scenario. And that makes sense, because there were no other events happening after G was scheduled that would have overruled it. All other events (A, B, C, E, F) were overruled (replaced) by a subsequent event that occurred sooner than 3 dash units later:

    • A was replaced by B because B occurred 1 dash later
    • B was replaced by C because C occurred 1 dash later
    • C was replaced by D because D occurred 2 dashes later
    • D was fired, because nothing occurred during the next 3 dashes.
    • E was replaced by F because F occurred 2 dashes later
    • F was replaced by G because G occurred 1 dash later
    • G was fired, because nothing occurred during the next 3 dashes.