Javascript 复制此函数会使其运行更快，这有什么原因吗？

我正在用CSS和JavaScript制作一个微调器，以便在页面加载时显示。
我学习了CSS技巧教程的基础知识，并在此基础上进行了改进，达到了我的目的。一切都很好，除了每次创建微调器时，它运行得更快。我已经用一个

setTimeout

函数演示了这一点，该函数创建了一个微调器三次。这有点烦人，因为这意味着我每页只能有一个微调器，我不知道如何让它工作而不加速并这样做。以下是代码片段： 注意：仅适用于Chrome：（抱歉

let a=（a）=>document.querySelector（a）
，b=（a）=>document.queryselectoral（a）
，c=（a）=>document.getElementsByClassName（a）
，d=（a）=>document.getElementById（a）
，e=（a）=>document.getElementsByTagName（a）
，f=文件
，k=函数（i，j，k）{
if（a（“#c”））{
a（“#c”）.remove（）；
z_zZ=0；
}
设x=f.createElements（“http://www.w3.org/2000/svg“，‘svg’）
，y=f.createElements（“http://www.w3.org/2000/svg“，‘圆圈’”；
x、 setAttribute（'class'，'ak'）；
x、 id='c'；
x、 setAttribute（'width'，i）；
x、 setAttribute（'height'，i）；
y、 setAttribute（'class'，'ad ae aj'）；
y、 id='a'；
y、 setAttribute（'stroke'，k）；
y、 setAttribute（'stroke-width'，j）；
l（y，i，j）；
x、 儿童（y）；
y=f.CreateElements（“http://www.w3.org/2000/svg“，‘圆圈’”；
y、 setAttribute（'class'，'ad ae aj'）；
y、 id='b'；
y、 setAttribute（'stroke'，'white'）；
y、 setAttribute（'stroke-width'，j*2）；
l（y，i，j）；
x、 儿童（y）；
返回x；
}
，l=函数（i，j，k）{
i、 setAttribute（'fill'，'transparent'）；
i、 setAttribute（'r'，j/2-k/2）；
i、 setAttribute（'cx'，j/2）；
i、 setAttribute（'cy'，j/2）；
}
，m=函数（）{
设j=a（“#a”）
，k=parseInt（j.getAttribute（'r'））
，l=k*2*Math.PI
，m=a（“#b”）；
j、 style.strokeDasharray=`${l}${l}`；
m、 style.strokeDasharray=`${l}${l}`；
j、 style.strokedashcoffset=l；
m、 style.strokedashcoffset=l；
m、 style.transform='旋转（90度）'；
设n=m；
m、 删除（）；
职能o（p）{
设q=l-p/100*l；
j、 style.strokedashcoffset=q；
m？m.style.strokedashcoffset=q:null；
}
函数q（）{
o（z_zZ）；
z_zZ++；
}
设r=setInterval（q，20）；
setTimeout（函数（）{
净间隔（r）；
a（“#c”）。追加子项（n）；
设定间隔（q，20）；
}, 200);
}
，n=函数（i，j，n，z）{
i、 appendChild（k（j，n，z））；
setTimeout（m（），100）；
}
，z_zZ=0；
n（a（“主体”）、50、5、“黑色”）；
setTimeout（函数（）{n（a（'body'），50,5，'orange'）}，5000）；
setTimeout（函数（）{n（a（'body'），50，5，'red'）}，10000）；

.aj{z-index:1；}
.ae{变换原点：50%50%；}
.ad{变换：旋转（-90度）；}
.ak{动画：微调器2s轻松输入输出无限；}
@关键帧微调器{
0% {
变换：旋转（0度）；
}
100% {
变换：旋转（360度）；
}
}

---

因为当您再次运行函数

n

时，它内部的函数

m

会创建一个新的间隔。因此，现在有两个间隔运行函数

q

内部的函数

m

当两个间隔运行同一功能时，表示该功能将运行两次

在你的例子中，

z_zZ

现在正以两倍的速度递增。因此你的旋转速度加倍

您需要做的是添加一个变量

T

来存储一个interval实例。然后，在开始新的interval之前清除interval

请参见下面的示例。修改的行标记为

/*Modified*/

：

let a=（a）=>document.querySelector（a）
，b=（a）=>document.queryselectoral（a）
，c=（a）=>document.getElementsByClassName（a）
，d=（a）=>document.getElementById（a）
，e=（a）=>document.getElementsByTagName（a）
，f=文件
，k=函数（i，j，k）{
if（a（“#c”））{
a（“#c”）.remove（）；
z_zZ=0；
}
设x=f.createElements（“http://www.w3.org/2000/svg“，‘svg’）
，y=f.createElements（“http://www.w3.org/2000/svg“，‘圆圈’”；
x、 setAttribute（'class'，'ak'）；
x、 id='c'；
x、 setAttribute（'width'，i）；
x、 setAttribute（'height'，i）；
y、 setAttribute（'class'，'ad ae aj'）；
y、 id='a'；
y、 setAttribute（'stroke'，k）；
y、 setAttribute（'stroke-width'，j）；
l（y，i，j）；
x、 儿童（y）；
y=f.CreateElements（“http://www.w3.org/2000/svg“，‘圆圈’”；
y、 setAttribute（'class'，'ad ae aj'）；
y、 id='b'；
y、 setAttribute（'stroke'，'white'）；
y、 setAttribute（'stroke-width'，j*2）；
l（y，i，j）；
x、 儿童（y）；
返回x；
}
，l=函数（i，j，k）{
i、 setAttribute（'fill'，'transparent'）；
i、 setAttribute（'r'，j/2-k/2）；
i、 setAttribute（'cx'，j/2）；
i、 setAttribute（'cy'，j/2）；
}
，m=函数（）{
设j=a（“#a”）
，k=parseInt（j.getAttribute（'r'））
，l=k*2*Math.PI
，m=a（“#b”）；
j、 style.strokeDasharray=`${l}${l}`；
m、 style.strokeDasharray=`${l}${l}`；
j、 style.strokedashcoffset=l；
m、 style.strokedashcoffset=l；
m、 style.transform='旋转（90度）'；
设n=m；
m、 删除（）；
职能o（p）{
设q=l-p/100*l；
j、 style.strokedashcoffset=q；
m？m.style.strokedashcoffset=q:null；
}
函数q（）{
o（z_zZ）；
z_zZ++；
}
设r=setInterval（q，20）；
setTimeout（函数（）{
净间隔（r）；
a（“#c”）。追加子项（n）；
clearInterval（T）；/*修改*/
T=设定间隔（q，20）；/*修改*/
}, 200);
}
，T=null/*已修改*/
，n=函数（i，j，n，z）{
i、 appendChild（k（j，n，z））；
setTimeout（m（），100）；
}
，z_zZ=0；
n（a（“主体”）、50、5、“黑色”）；
setTimeout（函数（）{n