js中回調函數的學習筆記

更新時間：2014年07月31日 00:45:10 投稿：mdxy-dxy

這篇文章主要介紹了js中回調函數的相關知識,需要的朋友可以參考下

回調函數是什么在學習之前還真不知道js回調函數怎么使用及作用了，下面本文章把我在學習回調函數例子給各位同學介紹一下吧，有需了解的同學不防進入參考。

回調函數原理：

我現在出發(fā)，到了通知你”
這是一個異步的流程，“我出發(fā)”這個過程中（函數執(zhí)行），“你”可以去做任何事，“到了”（函數執(zhí)行完畢）“通知你”（回調）進行之后的流程

例子

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>

或者用匿名函數的形式

<script language="javascript" type="text/javascript">
 function dosomething(damsg, callback){
  alert(damsg);
  if(typeof callback == "function") 
  callback();
 } 
dosomething("回調函數", function(){
  alert("和 jQuery 的 callbacks 形式一樣!");
 }); 
</script>

2.高級方法

使用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>

傳參數

<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 傳參數

<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>

例子
//假如提供的數據源是一整數,為某學生的分數,當num<=0,由底層處理,當n>0時由高層處理.

//將下面這個函數拷貝下來存盤為1.js

function f(num,callback){
 if(num<0) { 
 alert("調用低層函數處理!");
 alert("分數不能為負,輸入錯誤!"); 
 }else if(num==0){
  alert("調用低層函數處理!");
 alert("該學生可能未參加考試！");
 }else{
 alert("調用高層函數處理!");
 callback();
 }
}

//將下面這個test.html文件存盤與1.js在一個目錄下：

<!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>無標題文檔</title>
<script type="text/javascript">
 function test(){
  var p=document.getElementById("pp");
 pp.innerText="";
  var num=document.getElementById("score").value;
 f(num,function(){ //匿名高層處理函數
 if(num<60) alert("未及格！");
 else if(num<=90) alert("該生成績優(yōu)良！");
 else alert("該生成績優(yōu)秀!"); })
 pp.innerText="by since1978 qq558064!"
 }
</script>
</head>

<body>
<p>
回調函數示例:當學生成績score<=0分時候，由底層處理；當score>0時，由高層處理。
</p>
請輸入學生成績<input type="text" id="score"> 
<input type="button" onClick="test()" value=" 看看結果">
<p id="pp"></p>
</body>
</html>

下面是其它網友的補充：

javascript中的回調模式：

形如：

function writeCode(callback){ 
   //執(zhí)行一些事物， 
   callback(); 
   //... 
  } 
 
  function intrduceBugs(){ 
   //....引入漏洞 
  } 
 
writeCode(intrduceBugs);

我們傳遞函數的應用給writeCode()，讓writeCode在適當的時候來執(zhí)行它（返回以后調用）

先看一個不怎么好的例子（后續(xù)要對其重構）：

//模擬查找頁面中的dom節(jié)點，將查找到的節(jié)點存在數組里面統(tǒng)一返回 
  //此函數只用于查找不對dom節(jié)點做任何的邏輯處理 
  var findNodes = function(){ 
   var i = 100000;//大量的循環(huán)， 
   var nodes = [];//用于存儲找到的dom節(jié)點 
   var found; 
   while(i){ 
    i -=1; 
    nodes.push(found); 
   } 
   return nodes; 
  } 
 
  //將查找找到的dom節(jié)點全部隱藏 
  var hide = function(nodes){ 
   var i = 0, 
    max = nodes.length; 
   for(;i<max;i++){ 
//findNodes后面有括號代表立即執(zhí)行，先執(zhí)行findNodes()然后執(zhí)行hide()< hide(findNodes()); 執(zhí)行函數 } ; 
nodes[i].style.display="none"
}

上面的方法是低效的，以為hide()必須再次遍歷有findNodes()返回的數組節(jié)點，如何避免這種多余的循環(huán)呢。 
  我們不能直接在findNodes中對查詢到的節(jié)點進行隱藏（這樣檢索就可修改邏輯耦合了），那么他就不再是一個通用函數了。 
  解決方法是用回調模式，可以將節(jié)點隱藏邏輯以回調函數方式傳遞給findNodes()并委托其執(zhí)行

//重構findNodes以接受一個回調函數 
   var findNodes = fucntion(callback){ 
    var i = 100000, 
     nodes = [], 
     found; 
    //檢查回調函數是否可用調用的 
    if(typeof callback !== 'function'){ 
     callback = false; 
    } 
    while(i){ 
     i -= 1; 
     if(callback){ 
      callback(found); 
     } 
     nodes.push(found); 
    } 
    return nodes; 
   } 
 
   //回調函數 
   var hide = function(node){ 
    node.style.display = 'none '; 
   } 
   //找到后續(xù)節(jié)點并在后續(xù)執(zhí)行中對其進行隱藏 
 findNodes(hide);//先執(zhí)行findNodes然后執(zhí)行hide，當然回調函數也可以在調用主函數時創(chuàng)建：findNodes(function(node){node.style.display = 'none';});

您可能感興趣的文章:

回調函數

一步一步教你寫淡入淡出帶注釋的圖片輪播插件（二）
開始之前，還是說說前文提到的關于把所有函數都寫在一個閉包內的優(yōu)化問題。前文也提到了，因為我們在初始化的時候要調用的只是init，所以可以只把init寫入閉包，其他功能函數作為init的原型繼承方法來調用。
2010-10-10
JavaScript類型檢測的方法實例教程
這篇文章主要給大家介紹了關于JavaScript類型檢測的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-04-04
JS實現獲取word文檔內容并輸出顯示到html頁面示例
這篇文章主要介紹了JS實現獲取word文檔內容并輸出顯示到html頁面,結合實例形式分析了JavaScript使用ActiveXObject組建操作word文件的相關實現技巧,需要的朋友可以參考下
2018-06-06
es6函數中的作用域實例分析
這篇文章主要介紹了es6函數中的作用域,結合實例形式分析了es6函數作用域相關原理、用法與操作注意事項,需要的朋友可以參考下
2020-04-04
javascript實現炫酷的拖動分頁
非常酷的javascript拖動分頁功能，無縫循環(huán)分頁，拖動鼠標即可完成分頁，鼠標向左拖動回到前一頁，向右拖動則翻開第二頁，還帶有動畫特效，著實很不錯，界面黑色，非主流風格，相信很多人會喜歡的。
2015-05-05
開發(fā)用到的js封裝方法（20種）
在本問中我們給大家總結了20種開發(fā)中常用到的JS封裝方法，有需要的讀者們可以學習下。
2018-10-10
js實現控制textarea輸入字符串的個數,鼠標按下抬起判斷輸入字符數
下面小編就為大家?guī)硪黄猨s實現控制textarea輸入字符串的個數,鼠標按下抬起判斷輸入字符數。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-10-10
js圖片翻書效果代碼分享
這篇文章主要介紹了js實現圖片翻書效果,代碼簡單，效果很棒，感興趣的小伙伴們可以參考一下
2015-08-08
js中編碼函數：escape,encodeURI與encodeURIComponent詳解
escape(), encodeURI()和encodeURIComponent()是在Javascript中用于編碼字符串的三個常用的方法，而他們之間的異同卻困擾了很多的Javascript初學者，這篇文章詳細的給大家介紹了js中編碼函數：escape,encodeURI與encodeURIComponent的相關資料，需要的朋友可以參考下。
2017-03-03
15條JavaScript最佳實踐小結
如果你的JavaScript代碼只是增加一些功能，那么盡管大膽地把文件引用放在HTML底部吧，你會看到明顯的速度提升。本文總結了15條小建議，感興趣的朋友可以參考下
2013-08-08