九句话轻松理解线程与异步以及回调函数

js异步

九句话轻松理解线程与异步以及回调函数。

  1. 在js中没有多线程,也就是说,在同一个时间只执行一个任务
  2. 但是如果真是这样,那么像一些事件(如用户点击),如果永远不点击,那么后面的代码就永远都要一直等待,这个等待是无意义的,并且cpu也是空闲的
  3. 所以把任务分成两种:同步任务和异步任务
  4. 所谓『同步任务』,就是一般任务,在js中一个一个的按续执行
  5. 所有同步任务都在主线程上执行,形成『执行栈』
  6. 『异步任务』就是如(dom event, timer),他们并不先执行,而且先将它们放到『任务队列』中(task queue),先进先出的执行。
  7. 『异步任务』中必须指定『回调函数』,『回调函数』就是被主线程挂起来的代码,当主线程要执行『异步任务』时,实际上就是执行回调函数
  8. 队列任务总是等执行栈中同步任务全部完成之后才执行
  9. 当执行栈的任务执行完后,开始读取队列任务中可以执行的任务(回调函数),这时就将回调函数加入到执行栈中执行,然后如此循环

分解来讲就是

问题

在JavaScript中大部分代码都是同步一个一个执行的,如果此时你写了一个click事件,那用户没有触发这个click,那按照同步的思想,click事件后面的代码都不会执行,直到你触发该事件为止,这就抛出了一个问题,我们如何来处理这些事件?要知道JavaScript是没有多线程的。(关于多线程可以看我的这篇文章)

方法

这时就是异步出场的时候了。对于异步任务,JavaScript并不直接执行,而是将它推入一个队列(关于队列可以看栈与队列),队列中存储的函数就是一个个的回调函数。等当前执行环境执行完毕后,再执行队列中的回调函数。

例子

例子就比如说setTimeout()函数。

function a(num) {
    for (var i = 0; i < num; i++) {
        (function(i) {
            setTimeout(function() {
                console.log("b:" + i);
            }, 10);
        })(i);
        console.log("a:" + i);
    }
}
a(5);

最后的输出为:

eventUtil.js:42 a:0
eventUtil.js:42 a:1
eventUtil.js:42 a:2
eventUtil.js:42 a:3
eventUtil.js:42 a:4
eventUtil.js:38 b:0
eventUtil.js:38 b:1
eventUtil.js:38 b:2
eventUtil.js:38 b:3
eventUtil.js:38 b:4

例子解释

可以看出先执行的是第42行的代码,后执行的是第38行代码,这很明显是因为第38行的代码是异步代码;而从b的输出是从0-4可以看出,这个异步代码被存放在是队列,因为这是先进先出加载的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,189评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,577评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,857评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,703评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,705评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,620评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,995评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,656评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,898评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,395评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,982评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2 342

推荐阅读更多精彩内容

  • 从哪说起呢? 单纯讲多线程编程真的不知道从哪下嘴。。 不如我直接引用一个最简单的问题,以这个作为切入点好了 在ma...
    Mr_Baymax阅读 2,726评论 1 17
  • 官方中文版原文链接 感谢社区中各位的大力支持,译者再次奉上一点点福利:阿里云产品券,享受所有官网优惠,并抽取幸运大...
    HetfieldJoe阅读 4,701评论 7 31
  • 弄懂js异步 讲异步之前,我们必须掌握一个基础知识-event-loop。 我们知道JavaScript的一大特点...
    DCbryant阅读 2,693评论 0 5
  • 41.多用派发队列,少用同步锁 在Objective-C中,如果有多个线程要执行同一份代码,那么有时可能会出问题。...
    Code_Ninja阅读 1,127评论 1 13
  • #海底两万里#【伙伴共读第66天】 今晚继续读日本喜剧泰斗岛田洋七(本名德永昭广)的《佐贺的超级阿嬷》下半...
    维C多阅读 2,196评论 0 0