Javascript 每100毫秒重新绘制一次正方形，但它不'；我不能平稳地移动

我有一个窗口事件侦听器。当我单击它时，它会触发“条件”函数，如果我在窗口的任何位置单击，该函数将确定正方形的下一个坐标。如果我不点击，什么都不会发生

然后它启动绘制函数，每100毫秒重复一次，绘制正方形。因此，每当我单击画布时，正方形都会根据我单击鼠标的位置移动

我的问题是绘制函数每100毫秒重复一次，所以每当我点击画布使正方形移动时，为什么正方形不平滑移动

const canvas=document.querySelector（'canvas'）；
const c=canvas.getContext（'2d'）；
//库德
设ballX=canvas.width/2；
设ballY=300；
让球高=50；
假设球厚=50；
//抽一次
draw（）；
window.addEventListener（'click'，函数（e）{
条件（e）；//传递window e参数以获取e.clientX。
函数execute（）{draw（）}
让间隔=设置间隔（执行，100）；
});
//确定正方形的下一个坐标
功能条件（e）{
设mouseX=e.clientX；
让mouseY=e.clientY；
if（mouseY>ballY&&mouseY圆球和鼠标<圆球+圆球高度和鼠标>圆球）{
ballX+=ballX-鼠标；
返回false；
}
if（mouseX>ballX&&mouseXballX&&mouseXballY）{
ballY+=ballY-mouseY；
返回false；
}
ballX+=ballX-鼠标；
ballY+=ballY-mouseY；
}
函数绘图（）{
c、 clearRect（0，0，canvas.width，canvas.height）；
c、 fillStyle='黑色'；
c、 fillRect（0,080600）；
c、 fillStyle='dodgerblue'；
c、 fillRect（圆球、圆球、圆球厚度、圆球高度）；
}

---

我认为平滑移动意味着要将长方体动画化到其目标位置。从您的实现来看，我认为您假设画布的行为类似于CSS动画。但是JavaScript画布是非常不同的；你必须完全编码你的动画

为了使长方体动画化到最终位置，必须将其坐标值增加（或减少）一定量

我已经实现了框在水平轴上移动的代码

const canvas=document.querySelector（'canvas'）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
const ctx=canvas.getContext（'2d'）；
类框{
构造器（x、y、宽度、高度、速度）{
this.x=x；//框的位置
这个。y=y；
this.w=width；//框宽
this.h=高度；//框高度
this.speed=speed；//这是定义长方体在画布上移动速度的因子
}
show（）{//在画布上绘制长方体
ctx.fillStyle='蓝色'；
ctx.fillRect（this.x，this.y，this.w，this.h）；
}
移动（目标）{
//检查该框是否符合目标。如果不符合目标，则添加/减去轴上的速度值。
if（target-this.x<0&&this.x>target）{
这个.x-=这个速度；
}
if（target-this.x>0&&this.x{
//根据鼠标单击的位置更新目标的tha值
target=（2*box.x）-e.clientX；
draw（）；
});
draw（）
*{
保证金：0；
填充：0；
}
当你希望它运行得更平稳时，你是什么意思？每次单击仅发生一次移动。另外，请注意，您并不是每次单击时都重置间隔，而是不断添加新的间隔，这将导致绘图越来越频繁。请注意，如果移动只发生在单击时，那么首先为什么要使用间隔？