Javascript 使用不同参数调用同一函数两次，但只执行最后一次

我有两个div需要设置动画：

<div class="d"></div>
<div class="p"></div>

我不明白为什么会发生这种情况，以及如何使这两个功能正常工作

代码段（如果需要）：

（（）=>{
“严格使用”；
常量init=（参数）=>{
const start=performance.now（）；
常量元素=params.target | | null；
requestAnimationFrame（函数animate（时间））{
让timeFraction=（time-start）/params.duration；
如果（时间分段>1）{
时间分割=1；
}
const progress=params.timingFunc（timeFraction，params.timingArg）；
参数drawFunc（进度，元素）；
if（时间分段<1）{
请求动画帧（动画）；
}
if（参数回调）{
如果（时间分段>=1）{
params.callback（）；
}
}
});
};
常数计时函数={
线性：（时间分数）=>{
返回时间分割；
}
};
常量空间={
easeIn：（func）=>{
返回计时函数[func]；
}
};
const defaultParams={
持续时间：1000，
timingFunc:paces.easeIn（'linear'），
timingArg:null，
延迟：空，
回调：null
};
常量makeParams=（定义，添加）=>{
设params=def；
如果（添加）{
（让我补充）{
if（Object.prototype.hasOwnProperty.call（add，i））{
参数[i]=添加[i]；
}
}
}
返回参数；
};
函数动画（参数）{
const params=makeParams（defaultParams，paramArgs）；
if（'timingFunc'在参数中）{
params.timingFunc=（typeof paramArgs.timingFunc=='function'）？paramArgs.timingFunc:paces[paramArgs.timingFunc.pace]（paramArgs.timingFunc.func）；
}
如果（！参数延迟）{
init（params）；
}否则{
设置超时（（）=>{
init（params）；
}，参数延迟）；
}
}
window.Anim=Anim；
})();
动画({
目标：document.getElementsByClassName（'d'）[0]，
drawFunc：（进度，元素）=>{
element.style.width=（进度*70）+'%'；
}
});
动画({
目标：document.getElementsByClassName（'p'）[0]，
drawFunc：（进度，元素）=>{
element.style.width=（进度*30）+'%'；
}
});
.d、.p{
背景色：红色；
高度：50px；
宽度：0；
边缘顶部：10px；
}
问题在于两个
Anim
调用都具有相同的
params
对象。两个
params
对象具有相同的精确回调
drawFunc

为什么？因为在
makeParams
中，您正在执行以下操作：

let params = def;

然后分配给
params
，这反过来会改变原始的
defaultParams
（此处别名为
def
）。当第二个函数调用
Anim
时，此第二个调用的回调
drawFunc
将分配给
defaultParams
对象。由于所有
params
对象基本上都是对
defaultParams
的引用，因此它们也会被更改，最后一次调用
Anim
的回调会被分配给所有对象

要解决此问题，只需使用
对象克隆
def
。分配
：

let params = Object.assign({}, def);

旁注：在
params
对象中，
target
属性也会更改，但在更改之前，它会被分配给
init
中的一个新变量：

const element = params.target || null;

因此，即使它在
params
对象中更改，您也不会真正注意到，因为所有后续代码都使用变量
元素
，而不是
params.target

工作代码：


（（）=>{
“严格使用”；
常量init=（参数）=>{
const start=performance.now（）；
常量元素=params.target | | null；
requestAnimationFrame（函数animate（时间））{
让timeFraction=（time-start）/params.duration；
如果（时间分段>1）{
时间分割=1；
}
const progress=params.timingFunc（timeFraction，params.timingArg）；
参数drawFunc（进度，元素）；
if（时间分段<1）{
请求动画帧（动画）；
}
if（参数回调）{
如果（时间分段>=1）{
params.callback（）；
}
}
});
};
常数计时函数={
线性：（时间分数）=>{
返回时间分割；
}
};
常量空间={
easeIn：（func）=>{
返回计时函数[func]；
}
};
const defaultParams={
持续时间：1000，
timingFunc:paces.easeIn（'linear'），
timingArg:null，
延迟：空，
回调：null
};
常量makeParams=（定义，添加）=>{
设params=Object.assign（{}，def）；
如果（添加）{
（让我补充）{
if（Object.prototype.hasOwnProperty.call（add，i））{
参数[i]=添加[i]；
}
}
}
返回参数；
};
函数动画（参数）{
const params=makeParams（defaultParams，paramArgs）；
if（'timingFunc'在参数中）{
params.timingFunc=（typeof paramArgs.timingFunc=='function'）？paramArgs.timingFunc:paces[paramArgs.timingFunc.pace]（paramArgs.timingFunc.func）；
}
如果（！参数延迟）{
init（params）；
}否则{
设置超时（（）=>{
init（params）；
}，参数延迟）；
}
}
window.Anim=Anim；
})();
动画({
目标：document.getElementsByClassName（'d'）[0]，
drawFunc：（进度，元素）=>{
element.style.width=（进度*70）+'%'；
}
});
动画({
目标：document.getElementsByClassName（'p'）[0]，
drawFunc：（进度，元素）=>{
element.style.width=（进度*30）+'%'；
}
});
.d、.p{
背景色：红色；
高度：50px；
宽度：0；
边缘顶部：10px；
}

console.log（“p1:+progress”）将为您提供答案；）
if（Object.prototype.hasOwnProperty.call（add，i））{
这里发生了什么？这里调用的是
hasOwnProperty
方法吗？为什么不简单地使用
const element = params.target || null;