专栏首页一路向前端javaScript回调函数

javaScript回调函数

一、概念

回调函数,或简称回调,是指通过函数参数传递到其它代码的,某一块可执行代码的引用。这一设计允许了底层代码调用在高层定义的子程序。

咋一看回调函数的概念,可能并不能立即理解什么是回调函数。通俗的讲,回调函数就是以函数作为参数传给另一个函数执行。比如:有一个函数A,函数B, 将A函数作为B函数的参数,然后在B函数里执行A函数,这就是最简单的回调。

var A = function(){
    console.log("我是回调函数A。");
};

var B = function(callback){
    console.log("我是主函数B内的代码。");
    callback();
};

B(A);

这下大伙应该能理解什么是回调了吧。估计大伙会想,这样的回调有意义吗?把A函数的代码直接写到B函数里面不是更好吗? 如果在实际项目里这样写回调真的是糟糕透了。往下看,了解回调是如何应用的。

二、同步回调和异步回调

什么,回调不是异步的吗?仔细看看上面的例子,大家就能明白,回调不一定都是异步的,他有同步和异步之分。上面的示例就是一个同步回调, 所以我不想在过多的解释什么是同步回调,接下来,我们看看什么是异步回调。

由于 JS 是单线程的,一旦我们要执行一个长耗时的任务时,如果一直单线程的堵塞下去会导致程序的等待时间过长而使页面失去响应,非常影响用户体验。 为了解决这样的问题,我们就可以使用异步回调。将耗时的任务扔给异步去做,做好了再通知下我们做完了,我们拿到数据继续往下走。

下面是 ajax 异步请求的部分代码:

var xhr;
......

xhr.onreadystatechange = function(){
    if(xhr.readystate === 4 && xhr.status === 200){
        //do something
    }
}

当浏览器发起 ajax 请求的时候,会单开一个线程发起 http 请求,这样就能把耗时的 http 请求独自运行。在请求的过程中 readystate 的值会不断的变化,对应着不同的请求状态。大家看看 jquery 对 ajax 的封装就能明白,它就是根据 readystate 返回的状态,执行不 同的回调,最常用的两个回调应该是 success 函数和 error 函数。

异步回调的应用,如下,有 A 和 B 两个函数:

//一般情况下,应该是这样的

A();
B();

//当 A 函数是一个长耗时任务时,为了解决 A 函数长时间阻塞页面问题
//可以将 B 函数作为 A 函数的回调执行

function A(callback){
    setTimeout(function () {
        // A 的任务代码
        callback();
    }, 3000);
}

A(B);

因为 JS 是单线程的,所以异步回调也不是真正意义上的异步,它只不过是一个伪异步执行,它通常利用定时器和条件判断来伪装异步执行。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • tooltip.css-2.0文档

    只需在页面中引入"tooltip.css"或“tooltip.min.css”文件即可。

    用户6167509
  • JavaScript设计模式之策略模式

    所谓“条条道路通罗马”,在现实中,为达到某种目的往往不是只有一种方法。比如挣钱养家:可以做点小生意,可以打分工,甚至还可以是偷、抢、赌等等各种手段。在程序语言设...

    用户6167509
  • 调试 node.js 程序

    在程序开发中,如何快速的查找定位问题是一项非常重要的基本功。在实际开发过程中,或多或少都会遇到程序出现问题导致无法正常运行的情况,因此,调试代码就变成了一项无法...

    用户6167509
  • C#异步调用的方法

    最经公司工作需要调用一个外部的webservice,同时要将传出的数据进行保存,以自己以前的习惯,就打算逐步操作,失败啊,完全没考虑过用户体验效果,在同事指点下...

    逸鹏
  • 分布式系统关注点(19)——深入浅出「异步」

    Z哥在前面的三篇文章里和你一起聊了「高性能」主题下与「缓存」相关的内容。这次和你来聊聊提高性能的另一个大招——「异步」。

    Zachary_ZF
  • c#异步编程

    *委托类型的BeginInvoke(<输入和输出变量>,AsyncCallback callback,object asyncState)方法 

    wfaceboss
  • C# 温故而知新:Stream篇(五)下

    对于重写的方法这里不再重复说明,大家可以参考我写的第一篇 以下是memoryStream独有的方法 virtual byte[] GetBuffer() 这个方...

    逸鹏
  • Taro 小程序开发大型实战(六):尝鲜微信小程序云(上篇)

    如果你敲到这里,会发现我们之后的内容都是纯前端(小程序端)的逻辑,一个完整的可上线小程序应用应该还要有后端,在这篇文章中,我们将使用微信小程序云作为我们的后台,...

    一只图雀
  • DAX 概念

    授之以鱼不如授之以渔,有关DAX的概念性介绍我特意地拖到这个章节统一来讲,以免在前面穿插让大家混淆。DAX是Data Analysis Expression的缩...

    公众号PowerBI大师
  • NC | 曾艺研究组合作发现小鼠卵巢上皮干细胞的身份属性及其在排卵后卵巢上皮的修复的作用

    10月31日,国际学术期刊 Nature Communications在线发表了中国科学院分子细胞科学卓越创新中心(生物化学与细胞生物学研究所)曾艺研究组的最新...

    生信宝典

扫码关注云+社区

领取腾讯云代金券