1. 程式人生 > >JS 對於回撥函式的理解,和常見的使用場景應用,使用注意點

JS 對於回撥函式的理解,和常見的使用場景應用,使用注意點

很經常我們會遇到這樣一種情況:

例如,你需要和其他人合作,別人提供資料,而你不需要關注別人獲取或者構建資料的方式方法。

你只要對這個拿到的資料進行操作。

這樣,就相當於我們提供一個外在的函式,別人呼叫這個函式,返回相應的資料。

例如:

function (num , numFun) {
if(num < 10){
//do sth
}else {
//do sth
numFun();
}
}

在num的判斷之後執行NumFun的函式。

所謂的回撥函式,可以這樣理解,它是為了實現這樣一個目的:

draw方法是一個繪圖的函式

現在我們呼叫這個draw方法,希望在圖形繪製完成之後,我們能夠進行相應的操作,為了保證這個操作是在繪圖完成之後呼叫的。

我們就採取這樣一種方法,將fun作為引數傳遞進draw,然後再draw函式執行完成之後,呼叫這個傳遞的fun方法

function draw(beforeDraw, afterDraw) {
beforeDraw();
//繪圖
//dosth

afterDraw();
}

//別人呼叫
draw(function(){
alert('繪圖之前執行');
//繪圖之前,do sth
},
function(){
alert('繪圖之後執行');
//繪圖之後,do sth
})

當然利用這種思想,我們可以在很多地方有很巧妙的使用:

比如之前舉得例子

你只關注資料的返回值,不關注別人呼叫這個方法是怎麼操作的。

方法1:

就可以利用回撥函式的思想,定義方法傳入的引數為函式,別人呼叫是,在函式引數中執行相應的操作,然後返回你所需要的值:

var drawBase = {
init : function (getdata){
  var mydata = getdata();
 $('#testID').bind('click', function(e){
  //利用mydata進行繪圖操作
})
},
}

//別人在呼叫你這個函式時候,傳入的引數為函式,函式中進行操作後返回相應的值

drawBase.init(function () {
//do sth
一系列操作之後
return data;
})

方法2、

你也可以,先定義一個空方法,然後別人再去重寫這個方法,進行一系列的操作之後,返回相應的資料

然後我們使用時候,就可以拿到這個返回的資料了:

Exp:

var drawBase = {
getdata = { },
init : function () {
$('testID').bind('click', function () {
  var data = drawBase.getdata();
//使用data進行你所需要的操作
})
}
}


//別人呼叫時候,就需要重寫這個方法

drawBase.getData = function () {
   //一系列操作,得到data,
 return data;
}


這兩種方法可以這樣理解:

方法一,繫結事件和操作,是在別人呼叫時候才做的,因此那個時候getdata()的方法是已知的可以直接繫結

方法二,繫結的事件和操作,是之前進行的,此時不知道getdata()的方法,因而給定一個空的方法定義,在別人呼叫重寫後,就可以拿到相應的資料

這個是我個人的一些看法~

Exp:


var stu={
    init : function(callback){
        //TODO ...
        if(callback && (callback  instanceof Function){
              callback('init...');//回撥
        }
    }
};


別人呼叫,傳入函式引數:
stu.init(function(){
     //這就是回調了...
});


加油!