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 = 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 = { }, init : function () { $('testID').bind('click', function () {   var data = drawBase.getdata(); //使用data进行你所需要的操作 }) } }

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

?

1 2 3 4

drawBase.getData = 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(){      //这就是回调了... });

加油！