首页 web前端 js教程 jquery中回调函数(callback)使用方法详解

jquery中回调函数(callback)使用方法详解

Jun 16, 2017 pm 04:41 PM
jquery 使用方法 函数 详解

自学jquery的时候,看到一英文词(Callback),顿时背部隐隐冒冷汗。迅速google之,发现原来中文翻译成回调。也就是回调函数了。不懂啊,于是在google回调函数,发现网上的中文解释实在是太“深奥”了,我承认自己才疏学浅了。看了几个回调的例子后,貌似有点理解了。下面是我对回调函数的理解,要是理解错了,请指正,不甚感激。

        首先还是从jquery网站上的英文定义入手,身为国人,我真感到悲剧。一个回调的定义被国内的“高手”解释成什么样,就在那绕圈子,貌似只有把你绕进去了,他才算高手。浮云,一切都是浮云。

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有一个参数,这个参数是个函数b,当函数a执行完以后执行函数b。那么这个过程就叫回调。

其实中文也很好理解:回调,回调,就是回头调用的意思。函数a的事先干完,回头再调用函数b。

举个现实的例子:约会结束后你送你女朋友回家,离别时,你肯定会说:“到家了给我发条信息,我很担心你。”对不,然后你女朋友回家以后还真给你发了条信息。小伙子,你有戏了。

其实这就是一个回调的过程。你留了个函数b(要求女朋友给你发条信息)给你女朋友,然后你女朋友回家,回家的动作是函数a。她必须先回到家以后,函数a的内容执行完了,再执行函数b,然后你就收到一条信息了。

这里必须清楚一点:函数b是你以参数形式传给函数a的,那么函数b就叫回调函数。

 也许有人有疑问了:一定要以参数形式传过去吗,我不可以直接在函数a里面调用函数b吗?确实可以。求解中。

<解惑:如果你直接在函数a里调用的话,那么这个回调函数就被限制死了。但是使用函数做参数就有下面的好处:当你a(b)的时候函数b就成了回调函数,而你还可以a(c)这个时候,函数c就成了回调函数。如果你写成了function a(){...;b();}就失去了变量的灵活性。>

理解实例:

<html> 
 
<head> 
 
<title>回调函数(callback)</title> 
<script language="javascript" type="text/javascript"> 
function a(callback) 
{    
    alert("我是parent函数a!"); 
    alert("调用回调函数"); 
    callback(); 
} 
function b(){ 
alert("我是回调函数b"); 
 
} 
function c(){ 
alert("我是回调函数c"); 
 
} 
 
function test() 
{ 
    a(b); 
   a(c); 
} 
 
</script> 
</head> 
 
<body> 
<h1>学习js回调函数</h1> 
<button onClick=test()>click me</button> 
<p>应该能看到调用了两个回调函数</p> 
</body> 
 
</html>
登录后复制

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

<!DOCTYPE HTML> 
<html> 
<head>  
<meta charset="GBK" />
<title>回调函数(callback)</title> 
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
<script language="javascript" type="text/javascript"> 
    var f;
    function d(){
        alert("我是Jquery定义的函数d");
    }
    var e = function(){
        alert("我也是Jquery定义的函数e");
    }
    
    function a(callback) {    
        alert("我是parent函数a!");   
        d(); 
        if (typeof callback === "function"){
            //alert(callback);
            callback(); 
        }
    } 
    function b(){ 
        alert("我是回调函数b");  
      
        d();
        e();
        f();
    } 
    function c(){ 
        alert("我是回调函数c");   
        d();
        e();
        f();
    } 
    function test1() { 
        a(b); 
    } 
    function test2() { 
        a(c); 
    } 
    $(function(){ 
        f = function(){ 
            alert("我是回调函数f");   
        } 
    });
</script> 
</head> 
<body > 
    <h1>学习js回调函数</h1> 
    <button onClick=test1()>test a(b)</button> 
    <button onClick=test2()>test a(c)</button> 
    <p>应该能看到调用了两个回调函数</p> 
    <p > </p> 
</body> 
</html>
登录后复制

以上是jquery中回调函数(callback)使用方法详解的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

golang函数动态创建新函数的技巧 golang函数动态创建新函数的技巧 Apr 25, 2024 pm 02:39 PM

Go语言提供了两种动态函数创建技术:closures和反射。closures允许访问闭包作用域内的变量,而反射可使用FuncOf函数创建新函数。这些技术在自定义HTTP路由器、实现高度可定制的系统和构建可插拔的组件方面非常有用。

C++ 函数命名中参数顺序的考虑 C++ 函数命名中参数顺序的考虑 Apr 24, 2024 pm 04:21 PM

在C++函数命名中,考虑参数顺序至关重要,可提高可读性、减少错误并促进重构。常见的参数顺序约定包括:动作-对象、对象-动作、语义意义和遵循标准库。最佳顺序取决于函数目的、参数类型、潜在混淆和语言惯例。

如何在Java中写出高效和可维护的函数? 如何在Java中写出高效和可维护的函数? Apr 24, 2024 am 11:33 AM

编写高效和可维护的Java函数的关键在于:保持简洁。使用有意义的命名。处理特殊情况。使用适当的可见性。

excel函数公式大全 excel函数公式大全 May 07, 2024 pm 12:04 PM

1、 SUM函数,用于对一列或一组单元格中的数字进行求和,例如:=SUM(A1:J10)。2、AVERAGE函数,用于计算一列或一组单元格中的数字的平均值,例如:=AVERAGE(A1:A10)。3、COUNT函数,用于计算一列或一组单元格中的数字或文本的数量,例如:=COUNT(A1:A10)4、IF函数,用于根据指定的条件进行逻辑判断,并返回相应的结果。

C++ 函数默认参数与可变参数的优缺点比较 C++ 函数默认参数与可变参数的优缺点比较 Apr 21, 2024 am 10:21 AM

C++函数中默认参数的优点包括简化调用、增强可读性、避免错误。缺点是限制灵活性、命名限制。可变参数的优点包括无限灵活性、动态绑定。缺点包括复杂性更高、隐式类型转换、调试困难。

C++ 函数返回引用类型有什么好处? C++ 函数返回引用类型有什么好处? Apr 20, 2024 pm 09:12 PM

C++中的函数返回引用类型的好处包括:性能提升:引用传递避免了对象复制,从而节省了内存和时间。直接修改:调用方可以直接修改返回的引用对象,而无需重新赋值。代码简洁:引用传递简化了代码,无需额外的赋值操作。

自定义 PHP 函数和预定义函数之间有什么区别? 自定义 PHP 函数和预定义函数之间有什么区别? Apr 22, 2024 pm 02:21 PM

自定义PHP函数与预定义函数的区别在于:作用域:自定义函数仅限于其定义范围,而预定义函数可在整个脚本中访问。定义方式:自定义函数使用function关键字定义,而预定义函数由PHP内核定义。参数传递:自定义函数接收参数,而预定义函数可能不需要参数。扩展性:自定义函数可以根据需要创建,而预定义函数是内置的且无法修改。

C++ 函数异常进阶:定制错误处理 C++ 函数异常进阶:定制错误处理 May 01, 2024 pm 06:39 PM

C++中的异常处理可通过定制异常类增强,提供特定错误消息、上下文信息以及根据错误类型执行自定义操作。定义继承自std::exception的异常类,提供特定的错误信息。使用throw关键字抛出定制异常。在try-catch块中使用dynamic_cast将捕获到的异常转换为定制异常类型。实战案例中,open_file函数抛出FileNotFoundException异常,捕捉并处理该异常可提供更具体的错误消息。

See all articles