ClientX 和 ClientY 在通过 mousemove 事件触发时更新速度不够快。为什么？答案

【问题标题】：ClientX & ClientY not updating fast enough when they are triggered via the mousemove event. Why?ClientX 和 ClientY 在通过 mousemove 事件触发时更新速度不够快。为什么？
【发布时间】：2018-10-23 15:18:33
【问题描述】：

我有以下代码，期望鼠标跟随的 div 轨迹会根据鼠标移动的方向改变位置。似乎只有当我快速移动鼠标时，div 的方向才会更新。

当我缓慢移动鼠标时，事件仍会触发，但尾随 div 的位置不会相应改变。为什么会这样？这是我的代码问题还是 mousemove 事件更新 ClientX 和 ClientY 属性的速度？谢谢！

const body = document.querySelector('body');

let previousLeft = 0;
let previousTop = 0;
window.addEventListener('mousemove', function(e) {
  let leftMouse = e.clientX;
  let topMouse = e.clientY;
const mouseTrails = document.querySelectorAll('.mouseTrail');

  const setTrail = ((offsetX, offsetY) => {
    for (i = 0; i < mouseTrails.length; i++) {
      mouseTrails[i].style.left = leftMouse + "px";
      mouseTrails[i].style.top = topMouse + "px";
      mouseTrails[i].style.display = "block";

      leftMouse += offsetX;
      topMouse += offsetY;
    }
  });

  if (leftMouse > previousLeft && topMouse > previousTop) {
    setTrail(-20, -20);
  } else if (leftMouse < previousLeft && topMouse < previousTop) {
    setTrail(20, 20);
  } else if (leftMouse > previousLeft && topMouse < previousTop) {
    setTrail(-20, 20);
  } else if (leftMouse < previousLeft && topMouse > previousTop) {
    setTrail(20, -20);
  } else {
    setTrail(0, 0);
  }

  previousLeft = leftMouse;
  previousTop = topMouse;
});

.mouseTrail {
  height: 20px;
  width: 20px;
  background-color: tomato;
  transform: rotate(90deg);
  position: absolute;
  display: none;
}

<div class="mouseTrail"></div>
<div class="mouseTrail"></div>
<div class="mouseTrail"></div>
<div class="mouseTrail"></div>
<div class="mouseTrail"></div>

【问题讨论】：

我要做的第一件事是将const mouseTrails = document.querySelectorAll('.mouseTrail'); 移到侦听器之外，看看这是否会有所改善。每次移动鼠标时，您都会一次又一次地拾取元素，您不需要这样做。
我已将您的代码放入您可以运行的 sn-p 中。这表明正在发生其他事情，因为它似乎工作正常（从他们的回答来看，乔丹同意这一点）。

标签： javascript addeventlistener mousemove

【解决方案1】：

这可能与您使用的浏览器的速度有关。就我个人而言，代码似乎按预期工作。

您可以对代码进行一些优化，可能会加快代码速度。

首先，每次触发 mousemove 事件时，您都在查询 DOM 并创建一个新的“setTrail”函数。您可以将它们移到侦听器之外，以便在鼠标移动时执行的唯一代码就是移动轨迹的代码。

const body = document.querySelector('body');

let previousLeft = 0;
let previousTop = 0;

const mouseTrails = document.querySelectorAll('.mouseTrail');

function setTrail(x, y, offsetX, offsetY) {
    for (i = 0; i < mouseTrails.length; i++){
        mouseTrails[i].style.left = x + "px";
        mouseTrails[i].style.top = y + "px";
        mouseTrails[i].style.display = "block";
        x += offsetX;
        y += offsetY;
    }
}

window.addEventListener('mousemove', function(e){
    let leftMouse = e.clientX;
    let topMouse = e.clientY;

    if(leftMouse > previousLeft && topMouse > previousTop){
         setTrail(leftMouse, topMouse, -20, -20);
    }
    else if(leftMouse < previousLeft && topMouse < previousTop){
         setTrail(leftMouse, topMouse, 20, 20);
    }
    else if(leftMouse > previousLeft && topMouse < previousTop){
         setTrail(leftMouse, topMouse, -20, 20);
    }
    else if(leftMouse < previousLeft && topMouse > previousTop){
         setTrail(leftMouse, topMouse, 20, -20);
    }        
    else{
         setTrail(leftMouse, topMouse, 0,0);
    }
    previousLeft = leftMouse;
    previousTop = topMouse;
});

【讨论】：