如何提高 mousemove/clientX/Y 的速度并应用转换？

Question

我已经建立了一个 WordPress 主题。我遇到了一个网站，它创建了一个 div 来跟随用户的光标。当用户将鼠标悬停在按钮或链接上时，div 会平滑放大。

我想将这个不错的功能添加为可选功能。

我在网页上添加了一个 div，#ambition_cursor 并添加了一些基本样式。 div 现在显示为一个蓝色圆圈。圆圈的位置固定在网站的左上角。可以通过添加 CSS translate 属性来更改位置。

我设法使它与以下代码一起工作：

var ambition_cursor =  document.getElementById("ambition_cursor");

function ambition_mouse(e) {

    var ambition_cursor_x = e.clientX;     // Get the horizontal coordinate
    var ambition_cursor_y = e.clientY;     // Get the vertical coordinate 

    var ambition_cursor_pos = `translate(${ambition_cursor_x}px, ${ambition_cursor_y}px)`;
    ambition_cursor.style.transform = ambition_cursor_pos;
}

window.addEventListener('mousemove', ambition_mouse);

这里最大的缺点是滞后 (?)。有相当大的延迟，尤其是在快速移动鼠标时。你可以试试on this site。我也把情况放在a JSFiddle；虽然延迟并没有真正发生在那里。

我还没有应用太多样式（默认光标是可见的，因此您可以更好地了解实际位置）。在我花很多时间之前，我首先希望它能够更好地工作。

如何提高这个速度，让 div 位置更准确地跟随鼠标？我是初学者，所以我真的不知道应该进行哪些 JavaScript 优化。

当前代码是 JavaScript，但 jQuery 也是一种选择。

非常感谢！

更新：example how it looks on my computer.

Answer 1

页面上的所有元素都应用了过渡。删除/覆盖此样式，延迟消失（已测试）。

Answer 2

作为 Joseph Atkinson 出色回答的替代方案：

var ambition_cursor =  document.getElementById("ambition_cursor");

    function ambition_mouse(e) {
    
        ambition_cursor.style.left = e.clientX + 'px';     // Get the horizontal coordinate
        ambition_cursor.style.top = e.clientY + 'px' ;     // Get the vertical coordinate 
    }
    
    window.addEventListener('mousemove', ambition_mouse);

见：https://levelup.gitconnected.com/use-javascript-to-make-an-element-follow-the-cursor-3872307778b4

Answer 3

我访问了站点示例，破解了开发控制台，发现 throttled(20, vision_mouse) 不是性能问题，解决方法是不扼杀事件。它太顺利了，不可能是一个性能问题，这给了我第一个线索，它必须是一个意外/故意的效果。