javascript - 跟随鼠标位置的对象减慢

Question

我有一些缓慢跟随鼠标位置的 div。在开始时它开始很好，但它越接近鼠标位置越慢。我在下面有一个非常有效的代码，但我想改进它，以便 div 始终以恒定的速度跟随鼠标，而不是不断变化的速度。

var xp = x, yp = y;
var loop = setInterval(function(){
xp += ((mouseX - xp) ) / 100;
yp += ((mouseY - yp)) / 100;
object.css({left:xp, top:yp});
},20);}

因为当它靠近时它会跳水 100，所以数学变得更小，导致 X/Y 移动得更慢。我希望它保持相同的速度，无论它来自哪里。

Answer 1

这是解决方案：

var loop = setInterval(
    function()
    {
        speed = 20;
        xp += (mouseX - xp)>speed ? speed : ((mouseX - xp)<-speed ? -speed : (mouseX - xp));
        yp += (mouseY - yp)>speed ? speed : ((mouseY - yp)<-speed ? -speed : (mouseY - yp));
        object.css({left:xp, top:yp});
    },20
);

Answer 2

您是否尝试过使用网络工作者？

使用 Web Worker，您可以发送“繁重”任务以在后台线程中完成，这样您的 UI 线程就不会变得迟缓并且您的 Web 应用程序保持响应。

设置非常简单。

var worker = new Worker('someWorker.js');

看一看：

https://developer.mozilla.org/En/Using_web_workers