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

?

Js中的callback機制，即回調(diào)，可以這么形象的來理解，一個button存在這里，我們可以add一個action，那么如果這個button被觸發(fā)的時候會調(diào)用這個action。這其實就是一個callback機制。button像一個事件監(jiān)聽器，也是一個事件源；而action則是一個動作。

總結(jié)到j(luò)s在如下幾個地方常常用到：

1、動態(tài)加載（外部）js的時候，在加載完成之后進行一些操作，可以使用callback，拓展閱讀：如何判斷腳本加載完成、Javascript Callback的兩種實現(xiàn)方案

2、類似的，在加載iframe時也可以通過callback執(zhí)行一些操作，拓展閱讀：判斷?iframe?是否加載完成的完美方法

3、ajax的使用，提交請求后得到的返回值用callback機制解析使用，貌似現(xiàn)在大部分框架都是用得這種方式。

3、鏈式調(diào)用的時候，在賦值器方法中(或者本身沒有返回值的方法中)很容易實現(xiàn)鏈式調(diào)用，而取值器相對來說不好實現(xiàn)鏈式調(diào)用，因為你需要取值器返回你需要的數(shù)據(jù)而不是this指針，如果要實現(xiàn)鏈式方法，可以用回調(diào)函數(shù)來實現(xiàn)，大家可以看看文章后面舉的例子

4、settimeout、setInterval的函數(shù)調(diào)用得到其返回值，由于兩個函數(shù)都是異步的，即：他們的調(diào)用時序和程序的主流程是相對獨立的，所以沒有辦法在主體里面等待它們的返回值，它們被打開的時候程序也不會停下來等待，否則也就失去了setTimeout及setInterval的意義了，所以用return已經(jīng)沒有意義，只能使用callback。

5、settimeout的延遲時間為0，這個hack經(jīng)常被用到，settimeout調(diào)用的函數(shù)其實就是一個callback的體現(xiàn)，至于想了解settimeout的這個hack，大家有興趣可以看看realazy的文章：認識延遲時間為0?的setTimeout

6、事件處理中經(jīng)常需要用到callback機制，這個在前面的例子中（button）其實已經(jīng)有所體現(xiàn)。

7、其他一些需要在處理后進行一些額外處理的（這個比較泛，O(∩_∩)O~）

這些是我作的一個小小的總結(jié)，歡迎大家提意見和更多的想法！

?

附：設(shè)計一個簡單的支持鏈式調(dià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();??

?

如果取值器你也想支持鏈式調(diào)用？那么就采用回調(diào)函數(shù)來實現(xiàn)，將本來應(yīng)該返回的值直接傳給回調(diào)函數(shù)，而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("白色");??

?

轉(zhuǎn)載于:https://www.cnblogs.com/yingzi/archive/2012/03/12/2392642.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。