如何让updateCirclePosition()随屏幕刷新自动更新？requestAnimationFrame失效问题

你的代码无法自动触发updateCirclePosition的核心原因有两个：

1. updateCirclePosition中直接依赖event对象获取鼠标坐标，但这个对象仅在鼠标移动事件回调中存在，自动触发时event为undefined，会抛出错误终止动画循环。
2. 存储鼠标位置的mouseX、mouseY未初始化，首次执行时无有效值，导致计算出错。

修复步骤： #

• 在DOMContentLoaded回调内初始化mouseX和mouseY变量，设置初始值（比如窗口中心）。
• 移除updateCirclePosition中对event对象的依赖，直接使用全局存储的mouseX和mouseY。
• 确保requestAnimationFrame的调用不会因为错误被中断。

修复后的完整代码： #

document.addEventListener("DOMContentLoaded", function() {
    var object = document.getElementById("circle");
    // 初始化鼠标位置为窗口中心，避免首次执行时无值
    var mouseX = window.innerWidth / 2;
    var mouseY = window.innerHeight / 2;

    function updateCirclePosition() {
        var height = object.offsetHeight;
        var width = object.offsetWidth;

        var rect = object.getBoundingClientRect();
        var elemX = rect.left + window.scrollX;
        var elemY = rect.top + window.scrollY;

        var distanceX = mouseX - elemX;
        var distanceY = mouseY - elemY;

        var targetX = object.offsetLeft + object.offsetWidth / 2;
        var targetY = object.offsetTop + object.offsetHeight / 2;

        var distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY);

        function rotateObject(degrees) {
            object.style.transform = 'rotate(' + degrees + 'rad)';
        }

        var angle = Math.atan2(mouseY - targetY, mouseX - targetX);
        rotateObject(angle);

        var targX = (mouseX - targetX) / 10;
        var targY = (mouseY - targetY) / 10;

        var targetPosition = [targetX + targX, targetY + targY];

        object.style.left = "calc(" + targetPosition[0] + "px - " + width / 2 + "px)";
        object.style.top = "calc(" + targetPosition[1] + "px - " + height / 2 + "px)";

        requestAnimationFrame(updateCirclePosition);
    }

    requestAnimationFrame(updateCirclePosition);

    document.addEventListener("mousemove", function(event) {
        mouseX = event.clientX;
        mouseY = event.clientY;
    });
});

额外优化建议： #

• 把rotateObject函数移到updateCirclePosition外面，避免每次执行都重新创建函数，提升性能。
• 如果元素初始位置不是通过left/top定位，可能需要调整初始位置的计算逻辑。

内容的提问来源于stack exchange，提问作者TMG