我的JS笔记 -- 异步任务

136 阅读4分钟

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的初学者,笔记是学习时各处收集的,有一些是我自己的理解。但是不少知识来自分享到网络的大神们,因为实在不知道我在哪里使用了谁的文章,所以只能统一的表达一下我的感谢! 文章里边可能有的地方会有错误,如果发现,可以留言提醒我。