去抖动功能不会减少繁重计算的口吃

Question

我有一些滑块，当更改时会运行相当繁重的计算功能。 拖动滑块时会出现一些严重的卡顿现象，整体情况普遍不佳。

所以我的想法是使用去抖动，这样如果最后一次计算没有完成，它将被丢弃，而一个带有最新输入值的新计算将开始。

问题是我的去抖功能只有在计算花费的时间少于动画帧请求的情况下才有效，而且我不知道如果在下一个值出现时它没有完成，我将如何取消当前正在运行的操作集。

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);
    });
  };
}