封装时遇到的问题

3.有缓冲运动

1.从当前运动500 （在当前基础上+速度） ---- 》 到目标值

2.来回

3.封装（使用–width，height，left，top） —》opacity

4.透明度

5.任意属性运动

6.抽屉式运动 移入–500 离开–100 抽搐

7.多属性运动

8.不能所有元素到目标点停

4.回调函数

回调函数callback：某个动作或者是某个行为执行完以后调用的函数，是解决异步操作的有效途径

异步：在做某一个操作的时候，其他的操作可以继续执行 定时器

同步：在做某一个操作的时候，其他的操作只能等待 alert for

console.log(1);
setTimeout(function(){ //回调函数
    console.log(2);
},1000);
console.log(3);

最终的代码

  //1.获取元素
        var oDiv = document.getElementsByTagName("div")[0];
        /* 
        问题：不能所有的运动属性值都到达目标值
        原因：一个运动属性到达了目标点就把定时器停掉了
        解决：所有属性都到了目标点才能停
        */
        //2.鼠标移入 500    --100
        oDiv.onclick = function () {
            bufferMove(oDiv, { "left":500 }, 5,function(){
                bufferMove(oDiv, { "top":500 },5)
            })
        }
        function bufferMove(elem, attrs, xs,callback) { 
            clearInterval(elem.timer)
            elem.timer = setInterval(function () {
    
                //a.假设所有属性都到了目标 
                var tag= true;
                //b.验证：挨个看，只要有一个没有到目标点  假设不成立  tag = false
                for (var attr in attrs) {//attr:width  height
                    //4.获取当前值
                    if (attr == "opacity") {
                        //目标需要放大100
                        attrs[attr] = attrs[attr] < 1 ? attrs[attr] * 100 : attrs[attr];
                        var cur = parseInt(getStyle(elem, attr) * 100); //透明度的值太小，放大100倍处理
                    } else {
                        var cur = parseInt(getStyle(elem, attr));
                    }

                    //5.计算速度 (目标值-当前值)/系数
                    var speed = (attrs[attr] - cur) / xs;

                    //6.像素取整
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                    //3.移动div
                    if (attr == "opacity") {
                        elem.style[attr] = (cur + speed) / 100;  //透明度不加单位
                    } else {
                        elem.style[attr] = cur + speed + "px";
                    }

                    //c.只要有一个没有到目标点  假设不成立  tag = false
                    if(cur != attrs[attr]){
                        tag = false;
                    }
                }
                
                //d.通过tag的值，得出结论
                if(tag == true){
                    clearInterval(elem.timer);
                    //两真为真，如果第一个为真，看第二个，如果第一个为假，第二个就不看
                    callback&&callback(); //callback可选
                }
            }, 30);
        }