jquery中回调函数(callback)使用方法详解-js教程-PHP中文网

首页

web前端

js教程

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吗？确实可以。求解中。

b2742db4c932785aa9bfb4acdd106128

理解实例：

<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

超越浏览器：现实世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在现实世界中的应用包括服务器端编程、移动应用开发和物联网控制：1.通过Node.js实现服务器端编程，适用于高并发请求处理。2.通过ReactNative进行移动应用开发，支持跨平台部署。3.通过Johnny-Five库用于物联网设备控制，适用于硬件交互。

使用Next.js（后端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技术工具构建了功能性的多租户SaaS应用程序（一个Edtech应用程序），您可以做同样的事情。首先，什么是多租户SaaS应用程序？多租户SaaS应用程序可让您从唱歌中为多个客户提供服务

如何使用Next.js（前端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:22 AM

本文展示了与许可证确保的后端的前端集成，并使用Next.js构建功能性Edtech SaaS应用程序。前端获取用户权限以控制UI的可见性并确保API要求遵守角色库

JavaScript：探索网络语言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是现代Web开发的核心语言，因其多样性和灵活性而广泛应用。1)前端开发：通过DOM操作和现代框架（如React、Vue.js、Angular）构建动态网页和单页面应用。2)服务器端开发：Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发：通过ReactNative和Electron实现跨平台开发，提高开发效率。

JavaScript的演变：当前的趋势和未来前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

神秘的JavaScript：它的作用以及为什么重要Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。