想要实现一个可以实现渐变的函数接口,变量中有一个目标数组,但是执行时,发现只有最后一个目标数组中最后一个参数有效

想要实现一个可以实现渐变的函数接口,变量中有一个目标数组,但是执行时,发现只有最后一个目标数组中最后一个参数有效

问题相关代码,请勿粘贴截图
<!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)中进行下一次循环,

img


发现并不执行

img


在栈区并未显示setinterval的调用。
但是最后一个参数会执行调用

img

我的解答思路和尝试过的方法
我想要达到的结果
主要问题在这里:
 for(var i in param) //此处预想中是对每一个param中的属性进行变化,但是最终发现,只有最后一个参数发生变化。
改为: for(let i in param)
var 声明的变量是全局变量,所以是唯一的,循环的时候会被改变,let声明的变量仅在本次循环生效

如有帮助,请采纳!