zoukankan      html  css  js  c++  java
  • web前端之JavaScript之jquery中的回调函数

    回调函数指的是被调用者完成处理后自动回调调用者预先传递的函数。

    在类C语言中通常通过函数指针/引用的方式传递。

    jQuery也提供类似的回调函数机制。但是如何正确传递回调函数仍然值得一提。

    在John(jQuery Founder)写的指南中有详细的介绍。

    1、不带参数的回调

     $.get('myhtmlpage.html', myCallBack);

    其中myCallBack是函数名字。函数是javascript的基础。可以当作引用变量一样传递。

    2、带参数的回调

    很自然的,按照以往的经验,我们会认为带参数的回调是下面的样子:

    $.get('myhtmlpage.html', myCallBack(param1, param2));

    但这样将不能正常工作。myCallBack(param1, param2)会在调用这个语句的时候就被执行,而不是在之后。

    下面的语法才是正确的:

    $.get('myhtmlpage.html', function(){
      myCallBack(param1, param2);
    });

    这样回调函数被作为函数指针传递,将在get操作执行完成后被执行。

    程序演示:

     1 <!DOCTYPE html>
     2 <html>
     3 
     4     <head>
     5         <meta charset="utf-8">
     6         <title>回调函数</title>
     7         <script src="jquery/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
     8         <script type="text/javascript">
     9             $(document).ready(function(){
    10                 $("#btn1").click(function(){
    11                     $("#test1").text(function(i,origText){
    12                         return "Old text:"+origText+"new text:hello world!(index:"+i+")";
    13                     });
    14                 });
    15                 $("#btn2").click(function(){
    16                 $("#test2").html(function(i,origText){
    17                         return "Old html:"+origText+"new html:hello <b>world!</b>(index:"+i+")";
    18                     });
    19                 });
    20             });
    21         </script>
    22     </head>
    23     <body>
    24         <p id="test1">这是<b>粗体</b>文本。</p>
    25         <p id="test2">这是另一段<b>粗体</b>文本。</p>
    26         <button id="btn1">显示旧/新文本</button>
    27         <button id="btn2">显示旧/新 HTML</button>
    28     </body>
    29 
    30 </html>
  • 相关阅读:
    python:返回函数,闭包
    对象的行为和数组
    类、对象和包
    Java语言中的程序流程控制
    初识Java,Java语言概述
    有限广播地址与直接广播地址
    H3C模拟器HCL注意事项
    HDLC协议
    NETBIOS的作用
    HP DL380G7 RAID配置
  • 原文地址:https://www.cnblogs.com/ztyy04126/p/4928605.html
Copyright © 2011-2022 走看看