首页 > 代码库 > JS 对于回调函数的理解,和常见的使用场景应用,使用注意点

JS 对于回调函数的理解,和常见的使用场景应用,使用注意点

 

很经常我们会遇到这样一种情况:

例如,你需要和其他人合作,别人提供数据,而你不需要关注别人获取或者构建数据的方式方法。

你只要对这个拿到的数据进行操作。

这样,就相当于我们提供一个外在的函数,别人调用这个函数,返回相应的数据。

 

例如:

 

?
1
2
3
4
5
6
7
8
function (num , numFun) {
if(num < 10){
//do sth
}else {
//do sth
numFun();
}
}

 

在num的判断之后执行NumFun的函数。

 

所谓的回调函数,可以这样理解,它是为了实现这样一个目的:

draw方法是一个绘图的函数

现在我们调用这个draw方法,希望在图形绘制完成之后,我们能够进行相应的操作,为了保证这个操作是在绘图完成之后调用的。

我们就采取这样一种方法,将fun作为参数传递进draw,然后再draw函数执行完成之后,调用这个传递的fun方法

 

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function draw(beforeDraw, afterDraw) {
beforeDraw();
//绘图
//dosth
 
afterDraw();
}
 
//别人调用
draw(function(){
alert(‘绘图之前执行‘);
//绘图之前,do sth
},
function(){
alert(‘绘图之后执行‘);
//绘图之后,do sth
})

 

当然利用这种思想,我们可以在很多地方有很巧妙的使用:

比如之前举得例子

你只关注数据的返回值,不关注别人调用这个方法是怎么操作的。

方法1:

就可以利用回调函数的思想,定义方法传入的参数为函数,别人调用是,在函数参数中执行相应的操作,然后返回你所需要的值:

 

?
1
2
3
4
5
6
7
8
var drawBase = {
init : function (getdata){
  var mydata = http://www.mamicode.com/getdata();
 $(‘#testID‘).bind(‘click‘, function(e){
  //利用mydata进行绘图操作
})
},
}

 

//别人在调用你这个函数时候,传入的参数为函数,函数中进行操作后返回相应的值

 

 

?
1
2
3
4
5
drawBase.init(function () {
//do sth
一系列操作之后
return data;
})

方法2、

 

你也可以,先定义一个空方法,然后别人再去重写这个方法,进行一系列的操作之后,返回相应的数据

然后我们使用时候,就可以拿到这个返回的数据了:

Exp:

 

?
1
2
3
4
5
6
7
8
9
var drawBase = {
getdata = http://www.mamicode.com/{ },
init : function () {
$(‘testID‘).bind(‘click‘, function () {
  var data = http://www.mamicode.com/drawBase.getdata();
//使用data进行你所需要的操作
})
}
}


 

//别人调用时候,就需要重写这个方法

 

?
1
2
3
4
drawBase.getData = http://www.mamicode.com/function () {
   //一系列操作,得到data,
 return data;
}


 

这两种方法可以这样理解:

方法一,绑定事件和操作,是在别人调用时候才做的,因此那个时候getdata()的方法是已知的可以直接绑定

方法二,绑定的事件和操作,是之前进行的,此时不知道getdata()的方法,因而给定一个空的方法定义,在别人调用重写后,就可以拿到相应的数据

 

这个是我个人的一些看法~

 

Exp:

 

?
1
2
3
4
5
6
7
8
var stu={
    init : function(callback){
        //TODO ...
        if(callback && (callback  instanceof Function){
              callback(‘init...‘);//回调
        }
    }
};


别人调用,传入函数参数:
?
1
2
3
stu.init(function(){
     //这就是回调了...
});


 

加油!

 

JS 对于回调函数的理解,和常见的使用场景应用,使用注意点