我的JS笔记 -- 异步任务

作者: 骷髅不会笑丶 | 来源:发表于2017-12-15 23:00 被阅读17次

JS是单线程的(所谓单线程,是指在JS引擎中负责解释和执行JavaScript代码的线程只有一个,叫主线程),就是说JS同一时间只能处理一件事。那么就可能出现这种情况:一件事需要花费很长时间处理,后面的事情只能等待,体验就非常差。

所以JS中将执行的任务分为两类:同步任务和异步任务。

同步任务,同步任务指的是,发出调用立即获得结果的为同步任务。同步任务会在调用之后一直等待,直到返回结果。

异步任务,异步任务指的是,发出调用,但无法立即获得结果,需要额外的操作才能得到预期的结果的为异步任务。调用之后和拿到结果之间,可以进行其他操作。

JS运行环境运行机制

  1. 所有同步任务都在主线程上执行,形成一个执行栈;
  2. 主线程之外,还存在一个任务队列(一个先进先出的队列,里面放着各种事件)。只要异步任务有了运行结果,就在任务队列之中放置一个事件;
  3. 一旦执行栈中的所有同步任务执行完毕,系统就会读取任务队列,看看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行;
  4. 主线程不断重复上面的第三步;

所以执行栈中的代码(同步任务),总是在读取任务队列(异步任务)之前执行

事件和回调函数

事件,所谓的事件驱动就是将一切抽象为事件。I/O操作完成是一个事件,用户点击是一个事件,Ajax完成是一个事件,一个图片加载完成是一个事件,当产生事件后,这个事件会被放入任务队列中等待被处理。

回调函数,与事件关联的函数,会在执行事件时调用。

setTimeout(fn, 1000); // 例如setTimeout时间到了就会对应一个事件,而fn就是事件执行时调用的回调函数

事件循环(event loop)

主线程只会做一件事情,就是从任务队列里面取事件、执行事件,再取事件、再执行。当任务队列为空时,就会等待直到任务队列变成非空。而且主线程只有在将当前的事件执行完成后,才会去取下一个事件。这种机制就叫做事件循环机制,取一个消息并执行的过程叫做一次循环。

setTimeout(function () {
    console.log(1);
}, 0);
console.log(2);

// 2
// 1

// setTimeout(..) 并不是直接把回调函数挂在任务队列中。它所做的是设定一个定时器。当定时器到时后,相当于产生了一个时间到了的事件,这个事件进入任务队列。这样,下个事件循环主线程会取出并执行这个事件的回调函数
// 因为主线程会先执行完执行栈中的同步任务,才会去任务队列提取事件,所以异步任务的回调函数总是在同步任务知乎执行
// 但如果任务队列中已经有多个事件排队,那么就会导致setTimeOut的函数延后运行,这就是为什么setTimeOut和setInterval不准确的原因


for (var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(new Date());
    }, 1000);
}
console.log(new Date());

// 先输出一个日期,一秒后再几乎同时输出五个日期,但可以看出五个日期有细微的差别,这些误差就是因为任务队列中有多个事件排队导致后边事件延迟的结果

更多文章在 这里 ,觉得不错希望点个 star

相关文章

  • 我的JS笔记 -- 异步任务

    JS是单线程的(所谓单线程,是指在JS引擎中负责解释和执行JavaScript代码的线程只有一个,叫主线程),就是...

  • js核心知识点系列——《js引擎运行机制》

    知识点: 刚接触js的时候,把js执行顺序划分为同步任务和异步任务两种,同步任务先执行完之后再去执行异步任务,然后...

  • js异步发展简史

    什么是异步? 所谓异步,简单来说就是异步任务(不会马上就完成的任务);但是js不会等待你这个任务完成,而是直接执行...

  • 简述JS执行机制 Event Loop

    1.同步异步 JS是单线程的,由上至下排队执行任务代码。为了提高JS的性能又区分为 同步任务 和 异步任务。同步任...

  • 异步操作

    同步任务/异步任务,微任务/宏任务ajaxPromisegeneratorawait/async js是单线程的,...

  • setTimeout、Promise、Async/Await 的

    1、JS是单线程语言,包括同步任务、异步任务,异步任务又包括宏观任务和微观任务 2、执行顺序:同步任务——>微观任...

  • 同步任务队列、宏观任务队列、微观任务队列

    1、JS是单线程语言,包括同步任务、异步任务,异步任务又包括宏观任务和微观任务 2、执行顺序:同步任务——>微观任...

  • 同步任务队列、宏观任务队列、微观任务队列

    1、JS是单线程语言,包括同步任务、异步任务,异步任务又包括宏观任务和微观任务 2、执行顺序:同步任务——>微观任...

  • js 异步执行顺序

    js的执行顺序,先同步后异步异步中任务队列的执行顺序: 先微任务microtask队列,再宏任务macrotask...

  • js运行机制

    如何理解js的单线程 一个时间之内js只能干一件事 什么是任务队列和Event Loop 同步任务,异步任务异步任...

网友评论

    本文标题:我的JS笔记 -- 异步任务

    本文链接:https://www.haomeiwen.com/subject/krsjwxtx.html