JS 對於回撥函式的理解,和常見的使用場景應用,使用注意點
阿新 • • 發佈:2019-02-17
很經常我們會遇到這樣一種情況:
例如,你需要和其他人合作,別人提供資料,而你不需要關注別人獲取或者構建資料的方式方法。
你只要對這個拿到的資料進行操作。
這樣,就相當於我們提供一個外在的函式,別人呼叫這個函式,返回相應的資料。
例如:
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(){
//這就是回調了...
});
加油!