Block function calls called by another piece of code

Scenario:

I have a situation where a large number of checkboxes are bind to a function called onChange().

I also have another function that has the ability to reset/update specific checkboxes at once based on some other parameters in the code. Let's call this function rapidFire()

Now, what I would like to do is fire onChange() only and only when a user manually clicks on the checkbox. If my other code (reset/update) or rapidFire() that runs periodically, is making changes to the checkboxes where a series of onChange() calls are made, they should all be cancelled.

I have implemented a debounce logic to capture all onChange() calls made by the rapidFire() code, however, by the nature of debouncing, it still lets 1 call execute at the end after a certain milliseconds have elapsed.

What I would like to do is cancel all function calls made within a specific millisecond threshold assuming that they were made by the update/reset or rapidFire() code. I am also assuming here that if a human clicks a checkbox, it's hard for them to click another one within 250 ms or a similar timeframe.

Here's my code for debounce that I implemented with the help of this post

limitedOnChange = this.debounce(this.onChange, 250);

  onChange(event) { console.log('change detected: ', event) }

  debounce(fn, delay) {
    let timer = null;
    return function () {
      const context = this, args = arguments;
      clearTimeout(timer);
      timer = setTimeout(function () {
        fn.apply(context, args);
      }, delay);
    };
  }

On the HTML side: <ss-multiselect-dropdown (ngModelChange)="limitedOnChange($event)"></ss-multiselect-dropdown>

Rephrasing my question: How do I make changes to this debounce function such that it will cancel all function calls if fired back-to-back and only allow function call made 1 time within a threshold (mimic-ing human interaction)?