Debouncing and Throttling are two common strategies to tame the code execution that handles high frequency events.

Like, for instance, keyboard typing. Or mouse movement. Or animation frame changes. Or resizing. Or scrolling. Or zooming. Or... you get the idea.

So what are they and what's the difference between the two?

Throttling

Means execute not more than once every X seconds (or milliseconds, or any time span) while the high-frequency event is happening. Plus the first, initial call.

stateDiagram-v2
  [*] --> A
  A --> B
  B --> C
  C --> D
  D --> E
  E --> F
  F --> [*]

  [*] --> C :Throttle
  C --> F :Throttle
  F --> [*] :Throttle

So, for instance, throttling at 0.5 seconds, means that even if I invoke the execution 42 times in 1 second, it'll actually be executed only 3 times: once every 0.5 seconds + the initial call.

timeline
  title Throttling @ 0.5 seconds
  0s    : Normal, initial, Execution Call ✅
        : Throttled, initial, Execution Call ✅
  0.1s  : Normal Execution Call ✅
        : Throttled Execution Call 🛑
  0.3s  : Normal Execution Call ✅
        : Throttled Execution Call 🛑
  0.5s  : (No explicit execution call)
        : Throttled Execution Call ✅
  0.7s  : Normal Execution Call ✅
        : Throttled Execution Call 🛑
  0.95s : Normal Execution Call ✅
        : Throttled Execution Call 🛑
  1.0s  : Normal Execution Call ✅
        : Throttled Execution Call ✅

Debouncing

Means don't execute at all while the high-frequency event is happening. Execute only afterwards. Not even the initial call.

stateDiagram-v2
  [*] --> A
  A --> B
  B --> C
  C --> D
  D --> E
  E --> F
  F --> [*]

  [*] --> [*] :Debounce

So, for instance, debouncing at 0.5 seconds, means that even if I invoke the execution 42 times in 1 second, it'll actually be executed exactly 1 time, 0.5 seconds after the high-frequency has stopped, so after 1.5 seconds.

timeline
  title Debouncing @ 0.5 seconds
  0s    : Normal, initial, Execution Call ✅
        : Debounced Execution Call 🛑
  0.1s  : Normal Execution Call ✅
        : Debounced Execution Call 🛑
  0.3s  : Normal Execution Call ✅
        : Debounced Execution Call 🛑
  0.7s  : Normal Execution Call ✅
        : Debounced Execution Call 🛑
  0.95s : Normal Execution Call ✅
        : Debounced Execution Call 🛑
  1.0s  : Normal Execution Call ✅
        : Debounced Execution Call 🛑
  1.5s  : (No explicit execution call)
        : Debounced Execution Call ✅

Usage

dotnet add package H.Necessaire

highFrequencyEventDaemon.OnHighFrequencyEvent += NormalExecution;
highFrequencyEventDaemon.OnHighFrequencyEvent += ThrottledExecution;
highFrequencyEventDaemon.OnHighFrequencyEvent += DebouncedExecution;

await highFrequencyEventDaemon.Start();

StopDaemonAfter(highFrequencyEventDaemon, TimeSpan.FromSeconds(3));

static async Task NormalExecution(object sender, EventArgs ev)
{
    await Console.Out.WriteAsync('_');
}

static readonly Throttler throttler = new Throttler(async () => await Console.Out.WriteAsync("_Tht"), TimeSpan.FromSeconds(.35));
static async Task ThrottledExecution(object sender, EventArgs ev)
{
    await throttler.Invoke();
}

static readonly Debouncer debouncer = new Debouncer(async () => await Console.Out.WriteAsync("_Dbc"), TimeSpan.FromSeconds(.35));
static async Task DebouncedExecution(object sender, EventArgs ev)
{
    await debouncer.Invoke();
}

Running... press Ctrl+C to stop.
__Tht___________________Tht_____________________Tht________________________Tht_______________________Tht________________________Tht______________________Tht________________________Tht_______________________Tht__________Tht_Dbc

Full implementation on GitHub Samples repo

H.Necessaire.Usage.Samples/Src/H.Necessaire.Samples/H.Necessaire.Samples.ThrottleAndDebounce/Program.cs at master · hinteadan/H.Necessaire.Usage.Samples

Usage Samples for H.Necessaire Docs WebSite. Contribute to hinteadan/H.Necessaire.Usage.Samples development by creating an account on GitHub.

GitHubhinteadan