Java学习者论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

手机号码,快捷登录

恭喜Java学习者论坛(https://www.javaxxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,购买链接:点击进入购买VIP会员
JAVA高级面试进阶视频教程Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程

Go语言视频零基础入门到精通

Java架构师3期(课件+源码)

Java开发全终端实战租房项目视频教程

SpringBoot2.X入门到高级使用教程

大数据培训第六期全套视频教程

深度学习(CNN RNN GAN)算法原理

Java亿级流量电商系统视频教程

互联网架构师视频教程

年薪50万Spark2.0从入门到精通

年薪50万!人工智能学习路线教程

年薪50万!大数据从入门到精通学习路线年薪50万!机器学习入门到精通视频教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程 MySQL入门到精通教程
查看: 499|回复: 0

[默认分类] JS回调函数(callback)

[复制链接]
  • TA的每日心情
    开心
    2021-12-13 21:45
  • 签到天数: 15 天

    [LV.4]偶尔看看III

    发表于 2018-7-12 10:11:15 | 显示全部楼层 |阅读模式
    在使用Jquery的时候,用到Callback(),回调函数的概念。而且很多。

      比如:



    1. $.ajax({
    2.     url:"test.json",
    3.     type: "GET",
    4.     data: {username:$("#username").val()},
    5.     dataType: "json",
    6.     beforSend:function(){
    7.          // 禁用按钮防止重复提交
    8.         $("#submit").attr({ disabled: "disabled" });
    9.     },
    10.     complete:function(msg){
    11.         //请求完成后调用的回调函数(请求成功或失败时均调用)
    12.     } ,
    13.     error:function(msg){
    14.         //请求失败时被调用的函数
    15.     } ,
    16.     Sucess:function(msg){
    17.         //请求成功后调用的回调函数
    18.     }
    19. });
    复制代码

      


    回调函数大家都会用,只是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();}就失去了变量的灵活性。下面是代码:


      

    1. <!DOCTYPE HTML>
    2. <html>
    3. <head>  
    4. <meta charset="GBK" />
    5. <title>回调函数(callback)</title>
    6. <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
    7. <script language="javascript" type="text/javascript">
    8.     var f;
    9.     function d(){
    10.         alert("我是Jquery定义的函数d");
    11.     }
    12.     var e = function(){
    13.         alert("我也是Jquery定义的函数e");
    14.     }
    15.    
    16.     function a(callback) {   
    17.         alert("我是parent函数a!");   
    18.         d();
    19.         if (typeof callback === "function"){
    20.             //alert(callback);
    21.             callback();
    22.         }
    23.     }
    24.     function b(){
    25.         alert("我是回调函数b");  
    26.       
    27.         d();
    28.         e();
    29.         f();
    30.     }
    31.     function c(){
    32.         alert("我是回调函数c");   
    33.         d();
    34.         e();
    35.         f();
    36.     }
    37.     function test1() {
    38.         a(b);
    39.     }
    40.     function test2() {
    41.         a(c);
    42.     }
    43.     $(function(){
    44.         f = function(){
    45.             alert("我是回调函数f");   
    46.         }
    47.     });
    48. </script>
    49. </head>
    50. <body >
    51.     <h1>学习js回调函数</h1>
    52.     <button onClick=test1()>test a(b)</button>
    53.     <button onClick=test2()>test a(c)</button>
    54.     <p>应该能看到调用了两个回调函数</p>
    55.     <p > </p>
    56. </body>
    57. </html>
    复制代码

    网上看了一个例子,进行了修改,按上面方式可以回调成功,直接复制粘贴到HTML文件中即可测试
      
      
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|Java学习者论坛 ( 声明:本站资料整理自互联网,用于Java学习者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2024-4-19 07:00 , Processed in 0.432342 second(s), 37 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表