Javascript onmousemove行为

Question

我有一张画了圆圈的画布。我希望当指针在圆圈内时，画布上会出现一个特殊的动画。当指针在圆圈外时，我希望画布恢复正常。动画是使用animate()创建的，运行时间大约为5秒。我用来检查指针跟踪器是否正常工作的代码是：

 if (context.isPointInPath(x, y)){ 
     document.getElementById("Show").innerHTML = 'inside';
    }
 else{
     document.getElementById("Show").innerHTML = 'Not inside';
 }

这似乎工作得很好。当指针在圆圈内时，我会打印“内部”，当指针在圆圈外时，我会打印“不在内部”。但是，当我添加了运行5秒的animate()函数时：

 if (context.isPointInPath(x, y)){ 
     document.getElementById("Show").innerHTML = 'inside';
     xe = 10; // reset xe again
     animate();
    }
 else{
     context.clearRect(70, 0, 1000, 70);
     document.getElementById("Show").innerHTML = 'Not inside';
 }

整个行为都会受到影响。最初，当指针在画布之外时，我得到“不在画布内”并且没有动画。但一旦指针进入圆圈，我就会进入“内部”，大约一毫秒，动画开始，文本被更改为“非内部”，即使指针在圆圈内。指针离开圆圈并再次进入圆圈后，动画将不会再次发生。这就像一旦指针最初进入圆圈，动画就会开始一次，整个过程就会被冻结。你们能帮我解决这个吗。谢谢。

顺便说一句，动画功能：

var xe = 10;
var speed = 30;
function animate(){ 
reqAnimFrame = window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame ;
reqAnimFrame(animate);
if (xe >1000){
    return;
}
else{
    xe +=speed;
}
draw();  // draws a circle with center xe
}

Answer 1

请参阅window.requestAnimationFrame()

animate()中的reqAnimFrame(animate)导致了递归调用，可以通过将其放在return条件之后来避免

function animate(){ 
    if (xe >1000){
        return;
    }
    else{
        xe +=speed;
    }
    draw();  // draws a circle with center xe

    reqAnimFrame = window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame ;
    reqAnimFrame(animate);
}