JS for the understanding of callback functions, and common use of scene applications, using the attention point

 

Very often we will encounter a situation where:

For example, you need to work with others to provide data, and you don't need to focus on how others get or build the data.

You just have to work on the data you've got.

In this way, it is equivalent to providing an external function that others call this function and return the corresponding data.

For example:

?

12345678

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

Executes the Numfun function after Num's judgment.

The so-called callback function, which can be understood as such, is to achieve such a purpose:

The Draw method is a drawing function

Now we call this draw method, we hope that after the drawing is finished, we can do the corresponding operation, in order to ensure that the operation is called after the drawing is completed.

We'll take a way to pass the fun as a parameter into draw, and then after the draw function is done, call the pass-through fun method

?

1234567891011121314151617

function draw(beforeDraw, afterDraw) {beforeDraw();//绘图//dosthafterDraw();}//别人调用draw(function(){alert(‘绘图之前执行‘);//绘图之前,do sth},function(){alert(‘绘图之后执行‘);//绘图之后，do sth})

Of course, using this idea, we can use it in many places:

For example, as previously cited.

You only focus on the return value of the data, not on how others invoke the method.

Method 1:

You can use the idea of a callback function, define the method passed in as a function, others call it, perform the corresponding action in the function parameter, and return the value you need:

?

12345678

var drawBase = {init : function (getdata){  var mydata = getdata(); $(‘#testID‘).bind(‘click‘, function(e){  //利用mydata进行绘图操作})},}

When someone calls you this function, the passed argument is a function, and the corresponding value is returned after the function has been manipulated.

?

12345

drawBase.init(function () {//do sth一系列操作之后returndata;})

Method 2,

You can also, first define an empty method, then others to rewrite this method, after a series of operations, return the corresponding data

Then we can get the data back when we use it:

Exp:

?

123456789

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

When someone calls, you need to override this method

?

1234	drawBase.getData = function () {   //一系列操作，得到data， returndata;}

These two methods can be understood as follows:

Method one, binding events and actions are made when others call, so the method of GetData () at that time is known to bind directly

Method Two, the bound event and operation, is done before, at this time do not know the method of GetData (), so given an empty method definition, after others call rewrite, you can get the corresponding data

This is some of my personal views ~

Exp:

?

12345678

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

Others call, pass in function parameters:?

123	stu.init(function(){     //这就是回调了...});

Come on!

JS for the understanding of callback functions, and common use of scene applications, using the attention point