ClientX и ClientY не обновляются достаточно быстро, когда они запускаются с помощью события mousemove.Зачем? - PullRequest
Новая
       18

ClientX и ClientY не обновляются достаточно быстро, когда они запускаются с помощью события mousemove.Зачем?

0 голосов
/ 23 октября 2018

У меня есть следующий код с ожиданием, что следы divs после мыши изменят положение в зависимости от направления движения мыши.Кажется, что ориентация 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>

1 Ответ

0 голосов
/ 23 октября 2018

Это может быть связано со скоростью браузера, который вы используете.Лично для меня код работает должным образом.

Есть несколько оптимизаций, которые вы можете внести в свой код, которые потенциально могут ускорить его.

Во-первых, вы запрашиваете DOM и создаетеновая функция setTrail каждый раз, когда вызывается событие mousemove.Вы можете переместить их за пределы слушателя, чтобы единственным кодом, который выполняется при перемещении мыши, был код для перемещения ваших следов. 

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