封装动画

    //新的位置=当前位置+步长
    //1、清空上一次的定时器,保证只有1个定时器
    //2、开启一个新的定时器
    //3、获取当前位置
    //4、判断方向,得到步长
    //5、新的位置=当前位置+步长
    //如果剩下的路程不足1步，就要清空定时器
    export const animate=(obj,json,callback)=>{
    clearInterval(obj.timer);
    obj.timer=setInterval(()=>{
        var flag=true;
        for(var attr in json){
            var target=0;
            var current=0;
            //如果是透明度,需要特殊处理
            if(attr=="opacity"){
                target=parseFloat(json[attr])*100;
                current=parseFloat(getStyle(obj,attr))*100;
            }else{
                target=parseInt(json[attr]);
                current=parseInt(getStyle(obj,attr));
            }
            var step=(target-current)/10;
            step=step>0?Math.ceil(step):Math.floor(step);
            if(attr=="opacity"){
                obj.style.opacity=(current+step)/100
            }else{
                obj.style[attr]=current+step+"px";
            }
            if(target!=current){
                flag=false
            }
        }
        if(flag){
            clearInterval(obj.timer)
            //清空定时器(动画总完)
            if(typeof callback=="function"){
                return callback();
            }
        }
       
    },30)
}

    
    Math.floor() 向下取整
    
    Math.ceil()向上取整

回调函数

回调函数也是一种高阶函数,把一个函数当做另外一个函数的参数,在另外一个函数内部被执行和传递参数

好处:

1.解决异步 2.对函数进行功能扩展

缺点:

1.容易造成回调地狱,回调地狱不方便维护与理解, 2.解决方案使用 promise + async + await

    
    //别人的
        function fn(callback){
            var a=10;
            var b=30;
            var res=a+b;

            if(typeof callback=="function"){
                callbck(res);//callback 就是下面fn函数 输入的匿名函数
            }

            return "123"
            //虽然执行return res; 外部能接受到res,但是破坏了原来定义fn的人，想return "123"的本意,我们只能在不破坏别人
            //的本意下,还能使用到res的值,就只能callback(res)传递参数
            //一个函数,只能执行一次return，如果return了 res ,就不能return "123'
        }

        //自己的
        fn(function(ccc){
            console.log(ccc);
        })
        console.log(fn());

纯函数

有参数的输入,有结果输出
并且不会产生副作用(不会对函数以外变量,产生影响)

absolute和fixed的区别

区别很简单:

1、没有滚动条的情况下没有差异

2、在有滚动条的情况下，fixed定位不会随滚动条移动而移动，而absolute则会随滚动条移动