Javascript 在用户悬停在画布上时创建动画

当用户在画布上悬停时，我尝试添加图像并设置它们的动画，一旦他们将鼠标从画布上移开，我想停止显示新图像

为了实现这一点，我尝试在新图像上设置一个间隔，以每100ms触发一次，然后如果用户将鼠标从画布上移开，该功能将停止触发

canvas.addEventListener("mouseover", setInterval(newImage, 100), false);
canvas.addEventListener("mouseout", clearInterval(newImage), false);

下面的JS代码

//获取画布元素
var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
函数newImage（）{
//画布上的任意位置
var randomPosition=parseInt（Math.random（）*window.innerWidth）；
变量图像=[
'http://www.convoy.me/image/landing/Scratcher.png',
'http://www.convoy.me/image/landing/push_harder_0006.png'
];
var y=窗内高度；
//选择随机图像
var randomImage=parseInt（Math.random（）*images.length）；
//生活画
（函数图（）{
var imageObj=新图像（）；
imageObj.onload=函数（）{
ctx.clearRect（随机位置-imageObj.width，y，imageObj.width，imageObj.height）；
y-=10；
ctx.drawImage（imageObj，随机位置-imageObj.width，y，imageObj.width，imageObj.height）；
如果（y>-图像对象高度）{
requestAnimationFrame（绘制）
}
};
imageObj.src=图像[随机图像]；
})();
}
canvas.addEventListener（“mouseover”，setInterval（newImage，100），false）；
canvas.addEventListener（“mouseout”，clearInterval（newImage），false）
我认为问题在于间隔从未清除。您需要将间隔分配给变量，然后按变量名称清除间隔：

var newImageInterval;

canvas.addEventListener("mouseover", function(){
  newImageInterval = setInterval(newImage, 100);
}, false);
canvas.addEventListener("mouseout", function(){
  clearInterval(newImageInterval);
}, false);

看起来clearInterval也需要包装在匿名函数中。一点也不奇怪。如果没有匿名函数，那么在声明事件侦听器时基本上调用clearInterval。您不给侦听器提供函数，而是提供setInterval的返回值。这就是为什么需要匿名函数的原因