javascript - 去抖功能不会减少繁重计算的卡顿

Question

我有一些滑块，当改变时会运行相当繁重的计算功能。这会导致在拖动滑块时出现一些严重的卡顿，以及总体上糟糕的体验。

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

问题是我的 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);
    });
  };
}