mousemove 停止和性能问题

Question

我正在尝试 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" value="0.15">

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

mousemove 停止和性能问题

mousemove stops and perfomance problems

javascript

jquery

performance

mouseevent

mousemove