Функция Debounce не снижает заикание при тяжелых вычислениях

Question

У меня есть несколько ползунков, которые при изменении запускают довольно тяжелую функцию вычислений. Это приводит к некоторому сильному заиканию при перетаскивании слайдера и в целом к ​​плохому опыту.

Поэтому моя идея заключалась в том, чтобы использовать debouncing, чтобы, если последнее вычисление не завершилось, оно было отброшено, и вместо него началось новое с последним входным значением.

Проблема в том, что моя функция debounce работает только в том случае, если вычисление занимает меньше времени, чем запрос кадра анимации, и я не знаю, как заставить его отменить текущую выполняемую операцию, если она не завершена при установке следующего значения.

function debounce(callback) {
  let handle;

  return function debounced(...args) {
    return new Promise(resolve => {
      if (handle !== undefined) {
        cancelAnimationFrame(handle);
      }

      const delayed = () => {
        resolve(callback.apply(this, args));
        handle = undefined;
      };

      handle = requestAnimationFrame(delayed);
    });
  };
}