移动停止和性能问题

Question

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

// Move
setInterval(function () {

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

             'left': e.pageX

         },300);


     });

 },400);

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

我该如何解决（获得更好的性能）

Answer 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">

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