想要实现一个可以实现渐变的函数接口，变量中有一个目标数组，但是执行时，发现只有最后一个目标数组中最后一个参数有效
问题相关代码，请勿粘贴截图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id='block'>
</div>
</body>
</html>
<style>
#block{
position: absolute;
background-color: aqua;
width: 100px;
height:200px;
margin: 0;
padding: 0;
left: 100px;
opacity: 1;
top:100px
}
</style>
<script>
function changes(){
if(fs>0)
{
obj['style'][i]=parseInt(curstyle[i])+step+'px';
setTimeout(changes,sps);
fs--;
}
clearTimeout(timer2);
console.log('转化完成');
};
var transform=function(obj,param,period)//分别代表需要改变的对象，需要改变的属性(一个对象)，开始状态，末状态，时间
{
//每一名的祯数
var sps=24;
var fps=1000/sps;
var step;
var fs=parseInt(sps*period);
var curstyle=window.getComputedStyle(obj,null);
for(var i in param) //此处预想中是对每一个param中的属性进行变化，但是最终发现，只有最后一个参数发生变化。
{ fs=parseInt(sps*period);
var cursitution=curstyle[i];
var targetsitution=param[i];
if(cursitution[i]=='auto')
{
cutsituation=0;
}
step=(parseInt(param[i])-parseInt(curstyle[i]))/fs;
var timer=setInterval(() => {
if(fs>0)
{
if(curstyle[i].indexOf("px")!=-1)
obj['style'][i]=parseInt(curstyle[i])+step+'px';
else
obj['style'][i]=parseInt(curstyle[i])+step;
fs--
}
else clearInterval(timer);
}, sps);
}
}
var block=document.getElementById('block');
transform(block,**{top:400,left:400}**,4);
</script>
运行结果及报错内容
当运行到第一个参数“top”时SetInterval函数
而是直接返回了for(i in prams)中进行下一次循环，
发现并不执行
在栈区并未显示setinterval的调用。
但是最后一个参数会执行调用
