• 理解javascript中的回调函数(callback)


    以下内容来源于:http://www.jb51.net/article/54641.htm

    最近在看 express,满眼看去,到处是以函数作为参数的回调函数的使用。如果这个概念理解不了,nodejs、express 的代码就会看得一塌糊涂。比如:

    app.use(function(req, res, next) {
        var err = new Error('Not Found');
        err.status = 404;
        next(err);
    });

    app是对象,use是方法,方法的参数是一个带参的匿名函数,函数体直接在后面给出了。这段代码怎么理解呢?我们先来了解回调函数这个概念。
    首先要了解,在 js 中,函数也是对象,可以赋值给变量,可以作为参数放在函数的参数列表中。比如:

    var doSomething = function(a,b)
    {
     return a + b;
    }

    这段代码的意思是定义一个匿名函数,这个匿名函数除了没有名字之外,其他跟普通的函数没有什么两样。然后把匿名函数赋值给变量doSomething。接下来我们调用:

    console.log(doSomething(2,3));

    这样会输出5。

    回调函数,就是放在另外一个函数(如 parent)的参数列表中,作为参数传递给这个 parent,然后在 parent 函数体的某个位置执行。说来抽象,看例子:

    // To illustrate the concept of callback
    var doit = function(callback)
    {
        var a = 1,
            b = 2,
            c = 3;
        var t = callback(a,b,c);
        return t + 10;
    };
    var d = doit(function(x,y,z){
        return (x+y+z);
    });
    console.log(d);

    先定义 doit 函数,有一个参数 callback。这个 callback 就是回调函数,名字可以任意取。看函数体,先定义三个变量 a,b,c。然后调用 callback 函数。最后返回一个值。

    下面就调用 doit 函数了。要注意的是,刚才定义 doit 时,callback 并没有定义,所以刚才并不知道 callback 是干什么用的。这其实很好理解,我们平时定义函数的时候,参数也只是给出了一个名字,比如 a,在函数体中使用 a,但整个过程也并不知道 a 到底是什么,只有在调用那个函数的时候才指定 a 的具体值,比如2.回过头来,在调用 doit 的时候,我们就需要指定 callback 究竟是个什么东西了。可以看到,这个函数完成了一个 sum 功能。

    上述代码的执行过程是:

    调用 doit函数,参数是一个匿名函数;进入 doit 的函数体中,先定义 a,b,c,然后执行刚才的匿名函数,参数是 a,b,c,并返回一个 t,最后返回一个 t+10给 d。

    回到最初的例子,app.use(...)是函数调用。我们可以想象,之前一定定义了一个 use 方法,只是这里没有给出。这两个例子一对比,就可以马上理解了。

    在使用nodejs、express 的时候,不可能每个方法或函数我们都要找到它的函数定义去看一看。所以只要知道那个定义里面给 callback 传递了什么参数就行了。然后在调用方法或函数时,在参数里我们自己定义匿名函数来完成某些功能。

    --------------------------------------------------------------------------------------------------

    以下内容来源于:http://www.cnblogs.com/xcsn/archive/2013/01/03/2843218.html

    在使用Jquery的时候,用到Callback(),回调函数的概念。而且很多。

    比如:

    $.ajax({
    url:"test.json",
    type: "GET",
    data: {username:$("#username").val()},
    dataType: "json",
    beforSend:function(){
    // 禁用按钮防止重复提交
    $("#submit").attr({ disabled: "disabled" });
    },
    complete:function(msg){
    //请求完成后调用的回调函数(请求成功或失败时均调用)
    } ,
    error:function(msg){
    //请求失败时被调用的函数
    } ,
    Sucess:function(msg){
    //请求成功后调用的回调函数
    }
    });

    -------------------------------------------------------------------------

    回调函数大家都会用,只是Jquery封装了之后,不能让大家明白回调函数的真正使用。

    JS Api 里这样解释:A callback is a function that is passed as an argument to another function and is executed after its parent function has completed.
    当然我们可以在JS当中来真正尝试一下回调函数的神奇。
    如果你直接在函数a里调用的话,那么这个回调函数就被限制死了。但是使用函数做参数就有下面的好处:当你a(b)的时候函数b就成了回调函数,而你还可以a(c)这个时候,函数c就成了回调函数。如果你写成了function a(){...;b();}就失去了变量的灵活性。下面是代码:
    <html> 
    <head> 
    <title>回调函数(callback)</title> 
    <script language="javascript" type="text/javascript"> 
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    function a(callback) {    
        alert("我是parent函数a!"); 
        alert("调用回调函数"); 
        //callback(); 
        $("#id").load("page参数");
        d();
        alert(callback);
    function b(){ 
    alert("我是回调函数b"); 
    $("#id").load("page参数");
    e();
    function c(){ 
    alert("我是回调函数c"); 
    $.ajax({
    ...
    });
    d();
    function test() { 
        a(b); 
        a(c); 
    $(document).ready(function(){
    function d(){
    alert("我是Jquery定义的函数");
    }
    var e = function(){
    alert("我也是Jquery定义的函数")
    }
    }
    </script> 
    </head> 
    <body> 
    <h1>学习js回调函数</h1> 
    <button onClick=test()>click me</button> 
    <p>应该能看到调用了两个回调函数</p> 
    </body> 
    </html> 
     
    估计大家也看到了,我在a(callback),b(),c()方法里都写了Jquery的ajax函数,注意,这里是ajax的函数。是有区别的,我分别调用了内置函数,和自己定义的函数。区别就在这里,因为Jquery和JS用的callback是一样的,互通的,所以在这里,Jquery的内置函数会被调用了。
    但是自己定义的函数是不会被识别的,甚至会报没有这个function.
    ---------------------------------------------------------------------------------------------------------
     
  • 相关阅读:
    hdu2860 并查集模拟
    hdu 3938 Portal离线并查集
    hdu 2489 Minimal Ratio Tree (DFS枚举+MST)
    hdu 3172 并查集+map
    hdu 1829 A Bug's Life 并查集系列
    hdu 1598 find the most comfortable road
    HDU1198
    【Oracle】【17】表创建后,对表进行操作(添加字段,删除主键约束等)
    【JS】【19】使用Jquery判断是电脑或手机或微信浏览器访问
    【JS】【18】当前时间加减一天和格式化时间格式
  • 原文地址:https://www.cnblogs.com/ios9/p/5339309.html
Copyright © 2020-2023  润新知