mousemove 停止和性能问题答案

【问题标题】：mousemove stops and perfomance problemsmousemove 停止和性能问题
【发布时间】：2020-05-21 16:28:19
【问题描述】：

我试图用鼠标（水平）像游戏一样移动 div，代码如下：

// Move
setInterval(function () {

     $(document.body).one('mousemove',function(e) {
         $('.p').animate({

             'left': e.pageX

         },300);


     });

 },400);

而且效果很好（几乎没有延迟），但效果很好问题是如果我在 1 分钟后没有在页面上做任何事情，如果我尝试移动鼠标，什么也没有发生有时也会有 10 秒的延迟

我该如何解决这个问题（获得更好的性能）

【问题讨论】：

你有演示吗？ jsfiddle什么的
1) 不要使用jQuery。 2）不要将left/right/top/bottom用于动画。仅限TRANSFORM。 3）不要使用setInerval/setTimeout，requestAnimationFrame更好。

标签： javascript jquery performance mouseevent mousemove

【解决方案1】：

CodePen

const mouse = document.querySelector('.mouse');
const mousePos = { x: 0, y: 0 };
const lastMousePos = { x: 0, y: 0 };
let speedFollow = 0.15;

document.addEventListener('mousemove', e => {
    mousePos.x = e.pageX;
    mousePos.y = e.pageY;
});
const lerp = (a, b, n) => (1 - n) * a + n * b;

function animateLoop() {
    lastMousePos.x = lerp(
        lastMousePos.x,
        mousePos.x,
        speedFollow
    );
    lastMousePos.y = lerp(
        lastMousePos.y,
        mousePos.y,
        speedFollow
    );

    mouse.style.transform = `translate(${lastMousePos.x}px, ${lastMousePos.y}px)`;
    requestAnimationFrame(animateLoop);
}
requestAnimationFrame(animateLoop);

// other
const inputRange = document.querySelector('input');
const speedFollowBlock = document.querySelector('p b');

inputRange.addEventListener('input', function() {
    speedFollow = this.value;
    speedFollowBlock.innerHTML = this.value;
});

body {
  min-height: 500vh;
}

.mouse {
  position: absolute;
  z-index: 1;
  width: 30px;
  height: 30px;
  left: -15px;
  top: -15px;
  background-color: #e74c3c;
  border-radius: 50%;
  transform: translate(-100%, -100%);
  pointer-events: none;
}

<p>Speed Follow: <b>0.15</b></p>
<input type="range" min="0.05" max="1" step="0.05" value="0.15">

<div class="mouse"></div>

【讨论】：