`

彻底理解javascript的回调函数(推荐)

 
阅读更多

在javascript中回调函数非常重要,它们几乎无处不在。像其他更加传统的编程语言都有回调函数概念,但是非常奇怪的是,完完整整谈论回调函数的在线教程比较少,倒是有一堆关于call()和apply()函数的,或者有一些简短的关于callback的使用示例。

  函数也是对象

  想弄明白回调函数,首先的清楚地明白函数的规则。在javascript中,函数是比较奇怪的,但它确确实 实是对象。确切地说,函数是用Function()构造函数创建的Function对象。Function对象包含一个字符串,字符串包含函数的 javascript代码。假如你是从C语言或者java语言转过来的,这也许看起来很奇怪,代码怎么可能是字符串?但是对于javascript来说, 这很平常。数据和代码之间的区别是很模糊的。

//可以这样创建函数
var fn = new Function("arg1", "arg2", "return arg1 * arg2;");
fn(2, 3);   //6

  这样做的一个好处,可以传递代码给其他函数,也可以传递正则变量或者对象(因为代码字面上只是对象而已)。

  传递函数作为回调

  很容易把一个函数作为参数传递。

复制代码
function fn(arg1, arg2, callback){
    var num = Math.ceil(Math.random() * (arg1 - arg2) + arg2);
    callback(num);  //传递结果
}

fn(10, 20, function(num){
   console.log("Callback called! Num: " + num); 
});    //结果为10和20之间的随机数
复制代码

  可能这样做看起比较麻烦,甚至有点愚蠢,为何不正常地返回结果?但是当遇上必须使用回调函数之时,你也许就不这样认为了!

  别挡道

  传统函数以参数形式输入数据,并且使用返回语句返回值。理论上,在函数结尾处有一个return返回语句,结构上就是:一个输入点和一个输出点。这比较容易理解,函数本质上就是输入和输出之间实现过程的映射。

  但是,当函数的实现过程非常漫长,你是选择等待函数完成处理,还是使用回调函数进行异步处理呢?这种情况下,使用回调函数变得至关重要,例 如:AJAX请求。若是使用回调函数进行处理,代码就可以继续进行其他任务,而无需空等。实际开发中,经常在javascript中使用异步调用,甚至在 这里强烈推荐使用!

  下面有个更加全面的使用AJAX加载XML文件的示例,并且使用了call()函数,在请求对象(requested object)上下文中调用回调函数。

复制代码
function fn(url, callback){
    var httpRequest;    //创建XHR
    httpRequest = window.XMLHttpRequest ? new XMLHttpRequest() :   //针对IE进行功能性检测
    window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : undefined;
    
    httpRequest.onreadystatechange = function(){
      if(httpRequest.readystate === 4 && httpRequest.status === 200){  //状态判断
          callback.call(httpRequest.responseXML);  
       }
    };
    httpRequest.open("GET", url);
    httpRequest.send();
}

fn("text.xml", function(){    //调用函数
   console.log(this);   //此语句后输出
});

console.log("this will run before the above callback.");  //此语句先输出
复制代码

  我们请求异步处理,意味着我们开始请求时,就告诉它们完成之时调用我们的函数。在实际情况中,onreadystatechange事件处理程 序还得考虑请求失败的情况,这里我们是假设xml文件存在并且能被浏览器成功加载。这个例子中,异步函数分配给了onreadystatechange事 件,因此不会立刻执行。

  最终,第二个console.log语句先执行,因为回调函数直到请求完成才执行。

分享到:
评论

相关推荐

    JavaScript 执行机制1

    JavaScript是一种单线程编程语言,这意味着它在同一时间只能执行一个任务。然而,JavaScript的设计允许它处理异步操作,以解决单线程限制...因此,彻底理解JavaScript的执行机制是每个JavaScript开发者必备的基础知识。

    JavaScript ppt

    Promise是JavaScript处理异步操作的一种方式,它可以解决回调地狱问题,使得异步代码更易于理解和维护。 8. ES6及后续版本的新特性:ECMAScript每年都会推出新的版本,带来许多改进和新特性,如箭头函数、模板字符...

    javascript

    3. **事件处理**:理解事件监听和回调函数,能够响应用户的操作,如点击、滚动等。 4. **异步编程**:学习Promise、async/await等异步编程技巧,处理网络请求和数据加载,提升应用程序的性能和用户体验。 5. **框架...

    JS彻底研究光盘

    4. 异步编程:包括回调函数、Promise和async/await,用于处理非阻塞式代码执行。 三、JavaScript在网页制作中的应用 1. DOM操作:通过JavaScript可以动态地修改HTML元素,实现网页内容的实时更新。 2. 事件处理:...

    30分钟,让你彻底明白Promise原理1

    在这个实现中,`then`方法用于注册回调函数,当Promise状态改变时,这些回调会被调用。为了支持链式调用,`then`方法返回当前Promise实例,即`return this;`。 然而,这个简单的实现没有处理错误情况。在实际的...

    dwr 开发培训 举例说明dwr在实际工作中的应用

    1. **JS引擎(Engine.js)**:负责拦截后台组件请求,统一客户端入口,封装参数,根据浏览器环境选择最优的数据提交策略,并处理结果通过回调函数通知前端。 2. **后台控制器(DWRServlet)**:初始化DWR配置,处理...

    dwr开发培训的ppt资源(入门级)

    5. **结果返回**:结果通过HTTP响应返回给Engine.js,Engine.js调用预先定义的回调函数,将数据传递给JavaScript代码。 6. **前端更新**:JavaScript代码根据返回结果更新页面内容,用户看到实时更新的界面。 **...

    DWR开发培训.pptDWR开发培训.ppt

    1. **JavaScript引擎(Engine.js)**:作为客户端的入口,负责拦截请求,包装参数,根据浏览器类型选择最优的数据传输策略,并处理服务器返回的结果,通过回调函数通知客户端。 2. **后台控制器(DWRServlet)**:在...

    DWR使用教程

    - **Web端调用**:展示如何使用JavaScript异步调用服务器端方法,包括回调函数、数据类型映射等。 - **数据类型对应**:JavaScript的Array对应Java的List或数组,Boolean对应Boolean,Object对应Map或Java Bean,...

    一文让你彻底搞清楚javascript中的require、import与export

    AMD的`require`函数接受两个参数,一个是依赖的模块,另一个是回调函数,回调函数接收已加载的模块作为参数。 ```javascript // 定义模块 define('math', [], function() { return { add: function(a, b) { ...

    jquery timer, -.1.2.js

    首先,jQuery Timer的基本用法是创建一个定时器实例,然后设置回调函数来执行特定任务。例如: ```javascript $("#myElement").timer(function() { // 在这里编写定时执行的代码 }, 3000); // 每3秒执行一次 ``` ...

    Node.js:Node.js是基于Chrome V8 JavaScript引擎构建JavaScript运行时-开源

    但在Node.js中,由于其非阻塞I/O模型,当进行I/O操作(如读取文件或网络通信)时,程序不会停止执行其他任务,而是通过回调函数或者Promise来处理结果,从而提高了整体的执行效率。 其次,“事件驱动”是Node.js的...

    详解node Async/Await 更好的异步编程解决方案

    从最早的回调函数,到 Promise 对象,再到 Generator 函数,每次都有所改进,但又让人觉得不彻底。 它们都有额外的复杂性,都需要理解抽象的底层运行机制。 在 Async 函数出来之后,有人认为它是异步编程的最终解决...

    es6学习笔记之Async函数的使用示例

    从最早的回调函数,到 Promise 对象,再到 Generator 函数,每次都有所改进,但又让人觉得不彻底。它们都有额外的复杂性,都需要理解抽象的底层运行机制。 异步I/O不就是读取一个文件吗,干嘛要搞得这么复杂?异步...

    ajax入门基础教程

    这种通信通常是通过JavaScript中的XMLHttpRequest对象来实现的,它能够向服务器请求数据,并在得到响应后执行回调函数来更新页面的相关部分,从而使Web应用程序具有更快速的响应能力和更好的用户体验。 在教程中...

    达内培训课件-Ajax

    5. **异步编程**:回调函数、Promise和async/await的使用,解决回调地狱。 6. **库与框架**:jQuery、axios等库的Ajax操作,以及它们的优点和适用场景。 7. **实战项目**:结合实际应用场景,练习使用Ajax开发动态...

    JDK1.8 Java 官方 jdk-8u181-windows-x64.rar

    JDK 1.8引入了Lambda表达式,这是一种简洁的匿名函数表示方式,可以简化处理函数接口和回调函数的代码。Lambda表达式使得Java的多线程编程(如ExecutorService)和集合操作(如Stream API)更加直观和高效。 2. **...

    jquery基本语法ppt

    6. **jQuery(callback)**:这是`$(document).ready()`的简写,表示DOM加载完成后执行回调函数。 ### jQuery对象访问 - **each(callback)**:遍历jQuery对象中的每个元素,以元素作为上下文执行回调函数。 - **size...

    goit-js-hw-11-timer

    `setTimeout`用于在指定时间后执行一次回调函数,而`setInterval`则会定期重复执行回调。在实现计时器时,可能需要结合`Date`对象来获取当前时间,并与初始时间进行比较以计算剩余时间。 【标签】虽然没有提供标签...

    jQuery弹出提示框插件zdialog.zip

    5. **回调函数**:提供了丰富的回调函数,如`onOpen`、`onClose`等,方便在特定事件发生时执行自定义代码。 6. **主题和样式**:zdialog提供了预设的主题,同时也支持自定义CSS,可以轻松改变对话框的外观以适应...

Global site tag (gtag.js) - Google Analytics