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(){

     //这就是回调了...

});

加油！

时间： 2024-10-22 12:33:15

JS 对于回调函数的理解，和常见的使用场景应用，使用注意点的相关文章

js回调函数(callback)理解

Mark! js学习 不喜欢js,但是喜欢jquery,不解释. 自学jquery的时候,看到一英文词(Callback),顿时背部隐隐冒冷汗.迅速google之,发现原来中文翻译成回调.也就是回调函数了.不懂啊,于是在google回调函数,发现网上的中文解释实在是太“深奥”了,我承认自己才疏学浅了.看了几个回调的例子后,貌似有点理解了.下面是我对回调函数的理解,要是理解错了,请指正,不甚感激. 首先还是从jquery网站上的英文定义入手,身为国人,我真感到悲剧.一个回调的定义被国内的“高手”解

关于js的回调函数的一点看法

算了一下又有好几个月没写博客了,最近在忙公司android的项目,所以也就很少抽时间来写些东西了.刚闲下来,我就翻了翻之前看的东西.做了android之后更加感觉到手机端开发的重要性,现在做native App  和Web App是主流,也就是说现在各种基于浏览器的web app框架也会越来越火爆了,做js的也越来越有前途.我也决定从后端开发渐渐向前端开发和手机端开发靠拢,废话不说了,我们来切入正题“js的回调函数”相关的东西. 说起回调函数,好多人虽然知道意思,但是还是一知半解.至于怎么用,还

JS之——回调函数的简单应用（插曲）

转载请注明出处:http://blog.csdn.net/l1028386804/article/details/46274893 JS无疑是前端页面与服务端交互数据的强大语言,那么如何利用JS的回调函数来封装JS的网络请求呢,本文就来简单说明这一问题 一.创建一个index.html文件 页面内容随便定义,重点是要引入如下自定义的两个js文件,一个是constants.js一个是validate.js 二.创建constants.js文件 /** * Created by liuyazhuan

Android中回调函数的理解---本人Android纯新手

本人大二,刚刚接触Android,也刚刚申请的cnblog博客,说一下对Android中回调函数的理解,Android中回调函数和C++.JAVA中的默认构造函数差不多,即运行到了一定的代码时自动调用的代码,而Android中的回调函数和C++.JAVA中的默认构造函数的区别在于:C++.JAVA中的默认构造函数在创建一个对象时自动调用,而Android中的回调函数的自动调用是在比如按了HOME键之后.

hbuilder开发node.js，以及node.js的回调函数

1.hbuilder安装node.js开发插件 工具---插件安装 然后重启Hbuilder让nodeeclipse生效就行了 运行:运行方式选择node应用就可以运行node.js了. 显示出了控制台,说明nodeJS可以在Hbuilder中使用了.(PS,电脑要先安装过node.js,Hbuilder只是辅助) 2.node.js的回调函数 原文地址:https://www.cnblogs.com/xingyue1988/p/8779633.html

JS回调函数（理解篇）

概述: 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数时,我们就说这是回调函数.回调函数不是由该函数的实现方直接调用,而是在特定的事件或条件发生时由另外的一方调用的,用于对该事件或条件进行响应. 定义: 在JavaScript中,回调函数具体的定义为:函数A作为参数(函数引用)传递到另一个函数B中,并且这个函数B执行函数A.我们就说函数A叫做回调函数.如果没有名称(函数表达式),就叫做匿名回调函数. 因此callba

关于js的callback回调函数的理解

回调函数的处理逻辑理解: 所谓的回调函数处理逻辑,其实就是先将回调函数的代码 冻结(或者理解为闲置),接着将这个回调函数的代码放到回调函数管理器的队列里面. 待回调函数被触发调用的时候,对应的回调函数的代码才会从管理器队列取出来并自动执行(激活回调函数的代码),实现异步的编程效果. 不过,对于一些必须要等回调函数执行完毕才可以确定的动作,实际上,就是会掉入一个层层回调的局面了.这点也是回调函数的复杂的地方! 换句话说,只要您要获取的值是要被回调才确定的,那接下来的所有代码都必须用回调的方式来编写

node.js 中回调函数callback(转载),说的很清楚,看一遍就理解了

最近在看 express,满眼看去,到处是以函数作为参数的回调函数的使用.如果这个概念理解不了,nodejs.express 的代码就会看得一塌糊涂.比如: 复制代码 代码如下: app.use(function(req, res, next) { var err = new Error('Not Found'); err.status = 404; next(err); }); app是对象,use是方法,方法的参数是一个带参的匿名函数,函数体直接在后面给出了.这段代码怎么理解呢?我们先来了解

js中的回调函数的理解和使用方法

一. 回调函数的作用 js代码会至上而下一条线执行下去,但是有时候我们需要等到一个操作结束之后再进行下一个操作,这时候就需要用到回调函数. 二. 回调函数的解释 因为函数实际上是一种对象,它可以存储在变量中,通过参数传递给另一个函数,在函数内部创建,从函数中返回结果值",因为函数是内置对象,我们可以将它作为参数传递给另一个函数,到函数中执行,甚至执行后将它返回,它一直被"专业的程序员"看作是一种难懂的技术. 回调函数的英文解释为: A callback is a functi