拖一滴逐渐变慢

Question

我有一个JavaScript拖放功能（（带自Dragula库），我注意到的一件事是，每次拖放操作的速度都在逐渐变慢。如果我有危险的话，我想是因为每当鼠标移动时就会触发拖动事件，这会导致太多事件，这可能会非常昂贵，并使UI变得非常慢。为了防止这种情况的发生，我想我需要过滤掉事件并只处理其中一些事件。

当我对Dragula库有依赖性时，该怎么做？这是我的JS代码：

let boxArray, boxes, drake;

function refreshComponents() {
  boxArray = document.getElementsByClassName("box");
  boxes = Array.prototype.slice.call(boxArray);
  drake = dragula({containers: boxes});
}

refreshComponents();

setInterval(function() {
  refreshComponents();
}, 2000);

const onComponentDrop = () => {
  refreshComponents();
  let components = [];
  for (let i = 0; i < drake.containers.length; i++) {
    if (drake.containers[i].children.length > 0) {
      for (let j = 0; j < drake.containers[i].children.length; j++) {
        let tempTagName = drake.containers[i].children[j].localName;
        let tagName = `<${tempTagName}></${tempTagName}>`;
        components.push(tagName);
      }
    }
  }
  sessionStorage.setItem('components', JSON.stringify(components));
  window.parent.window.postMessage({"for": "user", "action": "component-added", "data": components}, '*')
};

// noinspection JSUnusedAssignment
drake.on('drop', onComponentDrop);

请注意，需要refreshComponents方法来告知dragula，因为它们经常被破坏/重新创建，所以我在屏幕上当前拥有多少可拖动组件。