callback机制二

Ps：最近为了面试，看了些东西，把一些东西整理了一下，贴出来分享，也希望大家提提意见吧

***************************

Js中的callback机制，即回调，可以这么形象的来理解，一个button存在这里，我们可以add一个action，那么如果这个button被触发的时候会调用这个action。这其实就是一个callback机制。button像一个事件监听器，也是一个事件源；而action则是一个动作。

总结到js在如下几个地方常常用到：

1、动态加载（外部）js的时候，在加载完成之后进行一些操作，可以使用callback，拓展阅读：如何判断脚本加载完成、Javascript Callback的两种实现方案

2、类似的，在加载iframe时也可以通过callback执行一些操作，拓展阅读：判断 iframe 是否加载完成的完美方法

3、ajax的使用，提交请求后得到的返回值用callback机制解析使用，貌似现在大部分框架都是用得这种方式。

3、链式调用的时候，在赋值器方法中(或者本身没有返回值的方法中)很容易实现链式调用，而取值器相对来说不好实现链式调用，因为你需要取值器返回你需要的数据而不是this指针，如果要实现链式方法，可以用回调函数来实现，大家可以看看文章后面举的例子

4、settimeout、setInterval的函数调用得到其返回值，由于两个函数都是异步的，即：他们的调用时序和程序的主流程是相对独立的，所以没有办法在主体里面等待它们的返回值，它们被打开的时候程序也不会停下来等待，否则也就失去了setTimeout及setInterval的意义了，所以用return已经没有意义，只能使用callback。

5、settimeout的延迟时间为0，这个hack经常被用到，settimeout调用的函数其实就是一个callback的体现，至于想了解settimeout的这个hack，大家有兴趣可以看看realazy的文章：认识延迟时间为0 的setTimeout

6、事件处理中经常需要用到callback机制，这个在前面的例子中（button）其实已经有所体现。

7、其他一些需要在处理后进行一些额外处理的（这个比较泛，O(∩_∩)O~）

这些是我作的一个小小的总结，欢迎大家提意见和更多的想法！

 

附：设计一个简单的支持链式调用的类：

Js代码  

1. function Dog(name,color){   
2.               this.name=name||"";   
3.              this.color=color||"";   
4. }   
5. Dog.prototype.setName=function(name){   
6.         this.name=name;   
7.         return this;   
8. };   
9. Dog.prototype.setColor(color){   
10.         this.color=color;   
11.         return this;   
12. };   
13. Dog.prototype.yelp(){   
14.         alert("我的名字叫："+this.name+",我的颜色是:"+this.color);   
15.         return this;   
16. };  

function Dog(name,color){              this.name=name||"";             this.color=color||"";}Dog.prototype.setName=function(name){        this.name=name;        return this;};Dog.prototype.setColor(color){        this.color=color;        return this;};Dog.prototype.yelp(){        alert("我的名字叫："+this.name+",我的颜色是:"+this.color);        return this;};

 

使用方式：

Js代码  

1. var dog = new Dog();   
2. dog.setName("旺财").setColor("白色").yelp();  

var dog = new Dog();dog.setName("旺财").setColor("白色").yelp();

 

如果取值器你也想支持链式调用？那么就采用回调函数来实现，将本来应该返回的值直接传给回调函数，而return仍然返回this指针。接着上面的Dog类写一个方法：

Js代码  

1. Dog.prototype.getName(callback){   
2.      callback.call(this,this.name);   
3.         return this;   
4. }  

Dog.prototype.getName(callback){     callback.call(this,this.name);        return this;}

 

使用方式：

Js代码  

1. function showName(name){   
2.         alert(name);   
3. }   
4. dog.setName("旺财").getName(showName).setColor("白色");  

function showName(name){        alert(name);}dog.setName("旺财").getName(showName).setColor("白色");