http://www.awflasher.com/blog/archives/906

?

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代碼??

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代碼??

var?dog?=?new?Dog();??

dog.setName("旺財").setColor("白色").yelp();??

?

如果取值器你也想支持鏈式調用？那么就采用回調函數來實現，將本來應該返回的值直接傳給回調函數，而return仍然返回this指針。接著上面的Dog類寫一個方法：

?

Js代碼??

Dog.prototype.getName(callback){??

?????callback.call(this,this.name);??

????????return?this;??

}??

?

使用方式：

?

Js代碼??

function?showName(name){??

????????alert(name);??

}??

dog.setName("旺財").getName(showName).setColor("白色");??

?

轉載于:https://www.cnblogs.com/yingzi/archive/2012/03/12/2392642.html

總結

以上是生活随笔為你收集整理的Js中的callback机制的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。