zoukankan      html  css  js  c++  java
  • 浅谈js回调函数

    回调函数原理:

    我现在出发,到了通知你”
    这是一个异步的流程,“我出发”这个过程中(函数执行),“你”可以去做任何事,“到了”(函数执行完毕)“通知你”(回调)进行之后的流程

    例子

    1.基本方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <script language="javascript" type="text/javascript">
    function doSomething(callback) {
    // …
    // Call the callback
    callback('stuff', 'goes', 'here');
    }
    function foo(a, b, c) {
    // I'm the callback
    alert(a + " " + b + " " + c);
    }
    doSomething(foo);
    </script>

    或者用匿名函数的形式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <script language="javascript" type="text/javascript">
     function dosomething(damsg, callback){
      alert(damsg);
      if(typeof callback == "function")
      callback();
     }
    dosomething("回调函数", function(){
      alert("和 jQuery 的 callbacks 形式一样!");
     });
    </script>

     
    2.高级方法
     
    使用javascript的call方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <script language="javascript" type="text/javascript">
    function Thing(name) {
    this.name = name;
    }
    Thing.prototype.doSomething = function(callback) {
    // Call our callback, but using our own instance as the context
    callback.call(this);
    }
      
    function foo() {
    alert(this.name);
    }
      
    var t = new Thing('Joe');
    t.doSomething(foo); // Alerts "Joe" via `foo`
    </script>

     
    传参数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <script language="javascript" type="text/javascript">
    function Thing(name) {
    this.name = name;
    }
    Thing.prototype.doSomething = function(callback, salutation) {
    // Call our callback, but using our own instance as the context
    callback.call(this, salutation);
    }
    function foo(salutation) {
    alert(salutation + " " + this.name);
    }
    var t = new Thing('Joe');
    t.doSomething(foo, 'Hi'); // Alerts "Hi Joe" via `foo`
    </script>

    使用 javascript 的 apply 传参数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <script language="javascript" type="text/javascript">
    function Thing(name) {
    this.name = name;
    }
    Thing.prototype.doSomething = function(callback) {
    // Call our callback, but using our own instance as the context
    callback.apply(this, ['Hi', 3, 2, 1]);
    }
    function foo(salutation, three, two, one) {
    alert(salutation + " " + this.name + " – " + three + " " + two + " " + one);
    }
    var t = new Thing('Joe');
    t.doSomething(foo); // Alerts "Hi Joe – 3 2 1" via `foo`
    </script>

    例子
    //假如提供的数据源是一整数,为某学生的分数,当num<=0,由底层处理,当n>0时由高层处理.

    //将下面这个函数拷贝下来存盘为1.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    function f(num,callback){
     if(num<0) {
     alert("调用低层函数处理!");
     alert("分数不能为负,输入错误!");
     }else if(num==0){
      alert("调用低层函数处理!");
     alert("该学生可能未参加考试!");
     }else{
     alert("调用高层函数处理!");
     callback();
     }
    }

    //将下面这个test.html文件存盘与1.js在一个目录下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <script src="1.js" type="text/javascript"></script>
    <title>无标题文档</title>
    <script type="text/javascript">
     function test(){
      var p=document.getElementById("pp");
     pp.innerText="";
      var num=document.getElementById("score").value;
     f(num,function(){ //匿名高层处理函数
     if(num<60) alert("未及格!");
     else if(num<=90) alert("该生成绩优良!");
     else alert("该生成绩优秀!"); })
     pp.innerText="by since1978 qq558064!"
     }
    </script>
    </head>
     
    <body>
    <p>
    回调函数示例:当学生成绩score<=0分时候,由底层处理;当score>0时,由高层处理。
    </p>
    请输入学生成绩<input type="text" id="score">
    <input type="button" onClick="test()" value=" 看看结果">
    <p id="pp"></p>
    </body>
    </html>

    下面是其它网友的补充:

    javascript中的回调模式:

    形如:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function writeCode(callback){
       //执行一些事物,
       callback();
       //...
      }
      
      function intrduceBugs(){
       //....引入漏洞
      }
      
    writeCode(intrduceBugs);

            我们传递函数的应用给writeCode(),让writeCode在适当的时候来执行它(返回以后调用)

    先看一个不怎么好的例子(后续要对其重构):

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    //模拟查找页面中的dom节点,将查找到的节点存在数组里面统一返回
      //此函数只用于查找不对dom节点做任何的逻辑处理
      var findNodes = function(){
       var i = 100000;//大量的循环,
       var nodes = [];//用于存储找到的dom节点
       var found;
       while(i){
        i -=1;
        nodes.push(found);
       }
       return nodes;
      }
      
      //将查找找到的dom节点全部隐藏
      var hide = function(nodes){
       var i = 0,
        max = nodes.length;
       for(;i<max;i++){
    //findNodes后面有括号代表立即执行,先执行findNodes()然后执行hide()< hide(findNodes()); 执行函数 } ;
    nodes[i].style.display="none"
    }
     
    上面的方法是低效的,以为hide()必须再次遍历有findNodes()返回的数组节点,如何避免这种多余的循环呢。
      我们不能直接在findNodes中对查询到的节点进行隐藏(这样检索就可修改逻辑耦合了),那么他就不再是一个通用函数了。
      解决方法是用回调模式,可以将节点隐藏逻辑以回调函数方式传递给findNodes()并委托其执行
     
    //重构findNodes以接受一个回调函数
       var findNodes = fucntion(callback){
        var i = 100000,
         nodes = [],
         found;
        //检查回调函数是否可用调用的
        if(typeof callback !== 'function'){
         callback = false;
        }
        while(i){
         i -= 1;
         if(callback){
          callback(found);
         }
         nodes.push(found);
        }
        return nodes;
       }
      
       //回调函数
       var hide = function(node){
        node.style.display = 'none ';
       }
       //找到后续节点并在后续执行中对其进行隐藏
     findNodes(hide);//先执行findNodes然后执行hide,当然回调函数也可以在调用主函数时创建:findNodes(function(node){node.style.display = 'none';});
  • 相关阅读:
    MVC模式在Java Web应用程序中的实例分析
    设计模式
    实现xxxxxxx系统六大质量属性战术
    阅读了《大型网站技术架构:核心原理与案例分析》,分析XX系统如何增加相应的功能,提高系统的可用性和易用性
    淘宝系统质量属性分析
    《架构漫谈》读后感
    软件架构师架构设计过程是什么?
    《架构之美》阅读笔记06
    《架构之美》阅读笔记05
    《架构之美》阅读笔记04
  • 原文地址:https://www.cnblogs.com/turbo12138/p/5641338.html
Copyright © 2011-2022 走看看