Javascript 设置间隔和清除间隔问题？

$（“#向下”）。单击（函数（）{
$（“#移动”）.animate（{top:'+=75px'}，160，'线性'）
});
$（“#向上”）。单击（函数（）{
$（“#移动”）.animate（{top:'-=75px'}，160，'线性'）
});
函数游戏（）{
变量a=[0,10,15,20,25,35,40,45,50,55,62]；
var b=Math.floor（Math.random（）*a.length）；
var c=a[b]；
$（“#框”）.animate（{right:'+=100%}，1000，'linear'）；
$（“#框”）.animate（{右：'-=100%}，10）；
$（“#盒”）.animate（{top:c+'%'），0）；
};
无功定时器；
$（“#开始”）.on（'click'，function（）{timer=setInterval（game，1000）}）
$（“#停止”）.on（'click'，function（）{clearInterval（timer）}）

.搬家{
边框：1px纯黑；
位置：绝对位置；
左：50像素；顶部：40%；
高度：40px；宽度：40px；
背景色：rgb（0255100）；
}
.盒子{
边框：1px纯黑；
位置：绝对位置；
右：0%；顶部：26%；
高度：38%；宽度：2.2%；
背景颜色：红色
}
开始
停止
向下
向上的

我建议使用

requestAnimationFrame

仍然可以找到以下问题的答案

1） 使用

$（）.finish（）

以较小的间隔停止动画

2） 在

start

中使用

clearInterval（timer）

，就好像您多次单击start一样

$（“#向下”）。单击（函数（）{
$（“#移动”）.animate（{top:'+=75px'}，160，'线性'）
});
$（“#向上”）。单击（函数（）{
$（“#移动”）.animate（{top:'-=75px'}，160，'线性'）
});
函数游戏（）{
变量a=[0,10,15,20,25,35,40,45,50,55,62]；
var b=Math.floor（Math.random（）*a.length）；
var c=a[b]；
$（“#框”）.animate（{right:'+=100%}，1000，'linear'）；
$（“#框”）.animate（{右：'-=100%}，10）；
$（“#盒”）.animate（{top:c+'%'），0）；
};
无功定时器；
$（“#开始”）.on（'click'，function（）{game（）；clearInterval（计时器）；timer=setInterval（game，1000）}）
$（“#停止”）。在（'click'，function（）上{
$（“#框”）.finish（）；
清除间隔（计时器）
})

.搬家{
边框：1px纯黑；
位置：绝对位置；
左：50像素；顶部：40%；
高度：40px；宽度：40px；
背景色：rgb（0255100）；
}
.盒子{
边框：1px纯黑；
位置：绝对位置；
右：0%；顶部：26%；
高度：38%；宽度：2.2%；
背景颜色：红色
}
开始
停止
向下
向上的

可能是事件冒泡？你每1000毫秒触发一次，但在游戏中也会触发。（“#盒”）。动画（{右：'+=100%}，1000，'线性'）。感谢您的回复，Markus Zeller。你所说的“也在里面”是什么意思？你能在我上一次评论的引用行加上HTMLSE吗。动画也会延迟1000毫秒。@chandukomati上面添加了HTML。如果您使用

$（）.stop（）

您可以立即停止动画。谢谢您，先生，您建议的setInterval方法非常有效！我将您和Zeller关于requestAnimationFrame（）的反馈合并到我的脚本中，这比setInterval好得多。谢谢你的帮助！