时间戳

首页 > 解决方案 > 在每个鼠标事件性能上运行代码

javascript - 在每个鼠标事件性能上运行代码

问题描述

在我的应用程序中，我设置了一个鼠标事件，每次鼠标移动时都会发生。记录它看起来像这样：

在此处输入图像描述

每次移动鼠标时都会创建这些实例中的每一个，因此当用户在组件上时可能会发生数千甚至数万个实例。

然后我必须在每个事件上运行一些代码来获得我想要的功能：

  let paths = e.path.map(x => {
    return x.className;
  })

  console.log(paths);

  if (paths.includes('gantt_grid')) {
    // console.log('includes');
  }

得到以下结果：

在此处输入图像描述

我的功能可以正常工作，但我的问题是，这将如何提高性能？它似乎并没有减慢速度，但我确信这是不好的做法。映射成千上万次对我来说似乎并不好。浏览器能处理这个吗？

如果这很糟糕，是否有另一种方法可以在 JS 或 Angular 中执行此操作？

标签： javascript

解决方案

它现在可能不会减慢速度，具体取决于您的事件处理程序以及您正在计算的内容。然而，如果你做一些繁重的工作，比如 DOM 操作，它确实会减慢你的应用程序，因为它会填满主线程。

使用类似 lodashthrottle或debounce. 通常，您不需要触发这么多事件。

一个小例子：

const g = (id) => document.getElementById(id);
const handler = (e) => e.target.innerText = JSON.stringify({
  x: e.clientX,
  y: e.clientY
})

g('regular').addEventListener('mousemove', handler);
g('throttle').addEventListener('mousemove', _.throttle(handler, 1000));
g('debounce').addEventListener('mousemove', _.debounce(handler, 1000));
main div {
  width: 150px;
  height: 50px;
  margin: 10px;
  background: lightblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

<main>
  <div id="regular"></div>
  <div id="throttle"></div>
  <div id="debounce"></div>
</main>

您可以传递更多选项，因此您可以确保在事件的开始和结束时调用您的事件处理程序。debounce你甚至可以模拟它本身throttle。

推荐阅读