编程分为两类:系统编程(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