Lerp函数返回NaN问题求助：多种尝试后仍无法解决

核心原因 #

1. 变量未初始化：offX和offY未提前声明并赋值，第一次执行animIt时（用户还没触发mousemove事件），这两个变量是undefined，和数字进行lerp运算后会直接得到NaN。
2. 重复事件绑定：每次目标元素进入视口触发交叉观察时，都会重复给document绑定mousemove事件，导致回调多次执行，可能引发额外异常。

修复后的代码 #

function lerp(start, end, t){
    return (1-t)*start + t*end
}

let currentX = 0, currentY = 0;
// 提前初始化变量，避免未定义导致NaN
let offX = 0, offY = 0;

let cursorContainer = document.querySelector('#irbrkj');

let observer1 = new IntersectionObserver( function(entries, observer) {
    entries.forEach( (entry) => {
        if(entry.isIntersecting){
            // 使用命名函数，方便后续移除事件监听
            const handleMouseMove = (e) => {    
                offX = e.offsetX;
                offY = e.offsetY;    
            }
            document.addEventListener('mousemove', handleMouseMove);
          
            function animIt(){
                currentX = lerp(currentX, offX, 0.3 );
                currentY = lerp(currentY, offY, 0.3 );  

                console.log(currentX);
                console.log(currentY);
        
                cursorContainer.style.setProperty('--cursorTop', currentY + 'px');
                cursorContainer.style.setProperty('--cursorLeft', currentX + 'px');
                
                requestAnimationFrame(animIt);
            }      
          
            animIt();

            // 元素进入视口后取消观察，避免重复触发逻辑
            observer.unobserve(entry.target);
        }
    })
}, {
    threshold: 0.2
});

observer1.observe(cursorContainer);

关键修复点 #

• 初始化变量：提前声明offX和offY并赋值为0，确保第一次lerp计算时都是合法数字。
• 规范事件绑定：使用命名函数绑定mousemove事件，方便后续清理；同时在元素进入视口后取消交叉观察，避免重复执行绑定和动画启动逻辑。
• 修正回调参数命名：原代码中交叉观察回调的第一个参数命名为el，实际应为entries（交叉条目数组），规范命名避免误解。

内容的提问来源于stack exchange，提问作者Mr.Coder