js中回調(diào)函數(shù)的學(xué)習(xí)筆記
更新時(shí)間：2014年07月31日 00:45:10 投稿：mdxy-dxy
這篇文章主要介紹了js中回調(diào)函數(shù)的相關(guān)知識(shí),需要的朋友可以參考下
回調(diào)函數(shù)是什么在學(xué)習(xí)之前還真不知道js回調(diào)函數(shù)怎么使用及作用了，下面本文章把我在學(xué)習(xí)回調(diào)函數(shù)例子給各位同學(xué)介紹一下吧，有需了解的同學(xué)不防進(jìn)入?yún)⒖肌?/p>
回調(diào)函數(shù)原理：
我現(xiàn)在出發(fā)，到了通知你”
這是一個(gè)異步的流程，“我出發(fā)”這個(gè)過(guò)程中（函數(shù)執(zhí)行），“你”可以去做任何事，“到了”（函數(shù)執(zhí)行完畢）“通知你”（回調(diào)）進(jìn)行之后的流程
例子
1.基本方法
<script language="javascript" type="text/javascript">
function doSomething(callback) {
// …
// Call the callback
callback('stuff', 'goes', 'here');
}
function foo(a, b, c) {
// I'm the callback
alert(a + " " + b + " " + c);
}
doSomething(foo);
</script>
或者用匿名函數(shù)的形式
<script language="javascript" type="text/javascript">
function dosomething(damsg, callback){
alert(damsg);
if(typeof callback == "function")
callback();
}
dosomething("回調(diào)函數(shù)", function(){
alert("和 jQuery 的 callbacks 形式一樣!");
});
</script>
2.高級(jí)方法
使用javascript的call方法
<script language="javascript" type="text/javascript">
function Thing(name) {
this.name = name;
}
Thing.prototype.doSomething = function(callback) {
// Call our callback, but using our own instance as the context
callback.call(this);
}
function foo() {
alert(this.name);
}
var t = new Thing('Joe');
t.doSomething(foo); // Alerts "Joe" via `foo`
</script>
傳參數(shù)
<script language="javascript" type="text/javascript">
function Thing(name) {
this.name = name;
}
Thing.prototype.doSomething = function(callback, salutation) {
// Call our callback, but using our own instance as the context
callback.call(this, salutation);
}
function foo(salutation) {
alert(salutation + " " + this.name);
}
var t = new Thing('Joe');
t.doSomething(foo, 'Hi'); // Alerts "Hi Joe" via `foo`
</script>
使用 javascript 的 apply 傳參數(shù)
<script language="javascript" type="text/javascript">
function Thing(name) {
this.name = name;
}
Thing.prototype.doSomething = function(callback) {
// Call our callback, but using our own instance as the context
callback.apply(this, ['Hi', 3, 2, 1]);
}
function foo(salutation, three, two, one) {
alert(salutation + " " + this.name + " – " + three + " " + two + " " + one);
}
var t = new Thing('Joe');
t.doSomething(foo); // Alerts "Hi Joe – 3 2 1" via `foo`
</script>
例子
//假如提供的數(shù)據(jù)源是一整數(shù),為某學(xué)生的分?jǐn)?shù),當(dāng)num<=0,由底層處理,當(dāng)n>0時(shí)由高層處理.
//將下面這個(gè)函數(shù)拷貝下來(lái)存盤為1.js
function f(num,callback){
if(num<0) {
alert("調(diào)用低層函數(shù)處理!");
alert("分?jǐn)?shù)不能為負(fù),輸入錯(cuò)誤!");
}else if(num==0){
alert("調(diào)用低層函數(shù)處理!");
alert("該學(xué)生可能未參加考試！");
}else{
alert("調(diào)用高層函數(shù)處理!");
callback();
}
}
//將下面這個(gè)test.html文件存盤與1.js在一個(gè)目錄下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script src="1.js" type="text/javascript"></script>
<title>無(wú)標(biāo)題文檔</title>
<script type="text/javascript">
function test(){
var p=document.getElementById("pp");
pp.innerText="";
var num=document.getElementById("score").value;
f(num,function(){ //匿名高層處理函數(shù)
if(num<60) alert("未及格！");
else if(num<=90) alert("該生成績(jī)優(yōu)良！");
else alert("該生成績(jī)優(yōu)秀!"); })
pp.innerText="by since1978 qq558064!"
}
</script>
</head>
<body>
<p>
回調(diào)函數(shù)示例:當(dāng)學(xué)生成績(jī)score<=0分時(shí)候，由底層處理；當(dāng)score>0時(shí)，由高層處理。
</p>
請(qǐng)輸入學(xué)生成績(jī)<input type="text" id="score">
<input type="button" onClick="test()" value=" 看看結(jié)果">
<p id="pp"></p>
</body>
</html>
下面是其它網(wǎng)友的補(bǔ)充：
javascript中的回調(diào)模式：
形如：
function writeCode(callback){
//執(zhí)行一些事物，
callback();
//...
}
function intrduceBugs(){
//....引入漏洞
}
writeCode(intrduceBugs);
我們傳遞函數(shù)的應(yīng)用給writeCode()，讓writeCode在適當(dāng)?shù)臅r(shí)候來(lái)執(zhí)行它（返回以后調(diào)用）
先看一個(gè)不怎么好的例子（后續(xù)要對(duì)其重構(gòu)）：
//模擬查找頁(yè)面中的dom節(jié)點(diǎn)，將查找到的節(jié)點(diǎn)存在數(shù)組里面統(tǒng)一返回
//此函數(shù)只用于查找不對(duì)dom節(jié)點(diǎn)做任何的邏輯處理
var findNodes = function(){
var i = 100000;//大量的循環(huán)，
var nodes = [];//用于存儲(chǔ)找到的dom節(jié)點(diǎn)
var found;
while(i){
i -=1;
nodes.push(found);
}
return nodes;
}
//將查找找到的dom節(jié)點(diǎn)全部隱藏
var hide = function(nodes){
var i = 0,
max = nodes.length;
for(;i<max;i++){
//findNodes后面有括號(hào)代表立即執(zhí)行，先執(zhí)行findNodes()然后執(zhí)行hide()< hide(findNodes()); 執(zhí)行函數(shù) } ;
nodes[i].style.display="none"
}
上面的方法是低效的，以為hide()必須再次遍歷有findNodes()返回的數(shù)組節(jié)點(diǎn)，如何避免這種多余的循環(huán)呢。
我們不能直接在findNodes中對(duì)查詢到的節(jié)點(diǎn)進(jìn)行隱藏（這樣檢索就可修改邏輯耦合了），那么他就不再是一個(gè)通用函數(shù)了。
解決方法是用回調(diào)模式，可以將節(jié)點(diǎn)隱藏邏輯以回調(diào)函數(shù)方式傳遞給findNodes()并委托其執(zhí)行
//重構(gòu)findNodes以接受一個(gè)回調(diào)函數(shù)
var findNodes = fucntion(callback){
var i = 100000,
nodes = [],
found;
//檢查回調(diào)函數(shù)是否可用調(diào)用的
if(typeof callback !== 'function'){
callback = false;
}
while(i){
i -= 1;
if(callback){
callback(found);
}
nodes.push(found);
}
return nodes;
}
//回調(diào)函數(shù)
var hide = function(node){
node.style.display = 'none ';
}
//找到后續(xù)節(jié)點(diǎn)并在后續(xù)執(zhí)行中對(duì)其進(jìn)行隱藏
findNodes(hide);//先執(zhí)行findNodes然后執(zhí)行hide，當(dāng)然回調(diào)函數(shù)也可以在調(diào)用主函數(shù)時(shí)創(chuàng)建：findNodes(function(node){node.style.display = 'none';});
相關(guān)文章
開始之前，還是說(shuō)說(shuō)前文提到的關(guān)于把所有函數(shù)都寫在一個(gè)閉包內(nèi)的優(yōu)化問(wèn)題。前文也提到了，因?yàn)槲覀冊(cè)诔跏蓟臅r(shí)候要調(diào)用的只是init，所以可以只把init寫入閉包，其他功能函數(shù)作為init的原型繼承方法來(lái)調(diào)用。2010-10-10
JavaScript類型檢測(cè)的方法實(shí)例教程
這篇文章主要給大家介紹了關(guān)于JavaScript類型檢測(cè)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
JS實(shí)現(xiàn)獲取word文檔內(nèi)容并輸出顯示到html頁(yè)面示例
這篇文章主要介紹了JS實(shí)現(xiàn)獲取word文檔內(nèi)容并輸出顯示到html頁(yè)面,結(jié)合實(shí)例形式分析了JavaScript使用ActiveXObject組建操作word文件的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-06-06
javascript實(shí)現(xiàn)炫酷的拖動(dòng)分頁(yè)
非?？岬膉avascript拖動(dòng)分頁(yè)功能，無(wú)縫循環(huán)分頁(yè)，拖動(dòng)鼠標(biāo)即可完成分頁(yè)，鼠標(biāo)向左拖動(dòng)回到前一頁(yè)，向右拖動(dòng)則翻開第二頁(yè)，還帶有動(dòng)畫特效，著實(shí)很不錯(cuò)，界面黑色，非主流風(fēng)格，相信很多人會(huì)喜歡的。
2015-05-05 
在本問(wèn)中我們給大家總結(jié)了20種開發(fā)中常用到的JS封裝方法，有需要的讀者們可以學(xué)習(xí)下。
2018-10-10 
js實(shí)現(xiàn)控制textarea輸入字符串的個(gè)數(shù),鼠標(biāo)按下抬起判斷輸入字符數(shù)
下面小編就為大家?guī)?lái)一篇js實(shí)現(xiàn)控制textarea輸入字符串的個(gè)數(shù),鼠標(biāo)按下抬起判斷輸入字符數(shù)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-10-10 
這篇文章主要介紹了js實(shí)現(xiàn)圖片翻書效果,代碼簡(jiǎn)單，效果很棒，感興趣的小伙伴們可以參考一下
2015-08-08 
js中編碼函數(shù)：escape,encodeURI與encodeURIComponent詳解
escape(), encodeURI()和encodeURIComponent()是在Javascript中用于編碼字符串的三個(gè)常用的方法，而他們之間的異同卻困擾了很多的Javascript初學(xué)者，這篇文章詳細(xì)的給大家介紹了js中編碼函數(shù)：escape,encodeURI與encodeURIComponent的相關(guān)資料，需要的朋友可以參考下。
2017-03-03 
如果你的JavaScript代碼只是增加一些功能，那么盡管大膽地把文件引用放在HTML底部吧，你會(huì)看到明顯的速度提升。本文總結(jié)了15條小建議，感興趣的朋友可以參考下
2013-08-08