回调函数

编程分为两类：系统编程（system programming）和应用编程（application programming）。所谓系统编程，简单来说，就是编写库；而应用编程就是利用写好的各种库来编写具某种功用的程序，也就是应用。
系统程序员会给自己写的库留下一些接口，即API（application programming interface，应用编程接口），以供应用程序员使用。
所以在抽象层的图示里，库位于应用的底下。当程序跑起来时，一般情况下，应用程序（application program）会时常通过API调用库里所预先备好的函数。但是有些库函数（library function）却要求应用先传给它一个函数，好在合适的时候调用，以完成目标任务。这个被传入的、后又被调用的函数就称为回调函数（callback function）。

登记回调函数（to register a callback function）。如下图所示（图片来源：维基百科）：

可以看到，回调函数通常和应用处于同一抽象层入。而回调就成了一个高层调用底层，底层再回过头来调用高层的过程。这应该是回调最早的应用之处，也是其得名如此的原因。回调机制的优势从上面的例子可以看出，回调机制提供了非常大的灵活性。请注意，从现在开始，我们把图中的库函数改称为中间函数了，这是因为回调并不仅仅用在应用和库之间。任何时候，只要想获得类似于上面情况的灵活性，都可以利用回调。

示例1

示例2
function animate(box,obj,callback) {
//如果定时器存在就 结束上一次的定时器 防止出现 晃动bug
clearInterval(box.timer)

box.timer =  setInterval(function () {

    var falg = true;//假设已经到达目的地

    for(var key in obj){

        console.log(key)

        if(key == 'opacity'){
            var current = parseFloat(getStyle(box)[key])*100;//当前坐标
            var target = obj[key]*100;//目的地的坐标
            var step = (target  - current)/10;
            //console.log(step)
            //step = Number(step.toFixed(3))
            step = (step>0 ?Math.ceil(step) :Math.floor(step))

            console.log(step)//1-0.09 0.91
            var op = current + step
            box.style[key] = op/100;

        }else{
            var current = parseFloat(getStyle(box)[key]);//当前坐标
            var target = obj[key];//目的地的坐标
            var step = (target  - current)/10;
            step = (step>0 ?Math.ceil(step) :Math.floor(step))
            //console.log(step)
            //当步长 小于0.375的时候 div 就不会移动了，就可能出现 永远到不了目的地
            box.style[key] = current + step +'px';
        }


        //停止定时器 ，必要所有的属性 都到达目的地以后才能停止

        if(current != target){
            //就没有到达目的地
            falg = false;
        }

    }
    //如果全部都到达目的地 就可以清除定时器
    if(falg == true){
        clearInterval(box.timer)
        callback()
    }
},50);

}
结果1

结果2