美文网首页
详解JS执行队列(JavaScript执行顺序),搞懂setTi

详解JS执行队列(JavaScript执行顺序),搞懂setTi

作者: 反手一个function | 来源:发表于2019-07-26 10:29 被阅读0次

定义:setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

举个栗子:

image1.png

但是setTimeout真的有那么简单吗?到底setTimeout是不是异步执行的呢?

没这么简单,再看一个栗子:

image2.png

我们在setTimeout里面指定了0ms,是希望这段代码能立即执行,但是实际上并没有效果,而是先打印出了2,然后才是1,最后大约1s的时间打印3。
这是不是就说明setTimeout就是异步的呢?
如果是异步的同时执行多个setTimeout()应该同时会执行,请再看下面的栗子:

image3.png

从上面的代码可以知道,JS不是多线程的,那js就是单线程的?有么有异步执行呢?

出现上面所有误区的最主要一个原因是:我们潜意识中认为,JavaScript引擎有多个线程在执行,JavaScript的定时器回调函数是异步执行的.
而事实上的,JavaScript使用了障眼法,在多数时候骗过了我们的眼睛,这里得澄清一个事实:

JavaScript引擎是单线程运行的,浏览器无论在什么时候都只且只有一个线程在运行JavaScript程序。

除了主JavaScript执行进程外,还需要一个在进程下一次空闲时执行的代码队列(这个队列就是监听执行回调的)。
随着页面生命周期推移,代码会按照执行顺序添加入队列,例如当按钮被按下的时候他的事件处理程序会被添加到队列中,并在下一个可能时间内执行。JavaScript中没有任何代码是立即执行的,但一旦进程空闲则尽快执行。
所以,定时器工作方式是当特定时间过去后将代码插入,但这并不意味着它会马上执行,只能表示它尽快执行。
设定一个150ms后执行的定时器,不代表150ms后它会马上执行,它只表示在150ms后被加入到执行队列中,如果这个时间点执行队列是空闲的,那么这段代码就会被执行;其他情况下,代码可能明显地等待更长时间才会去执行。
看下面这个栗子:

image4.png

上面的例子里,一般的理解应该是先打印0ms的再打印500ms的,但是,其实js在解析的时候遇到了setTimeout方法,第一次过了0ms后把延时0ms的优先加入执行队列里,再在500ms后把延时500ms的其放入待执行的队列里,跳过去顺序执行下面的代码,当主线程中的代码执行完成后,js引擎去检索待执行的队列有没有待执行的代码,这时候就会发现setTimeout方法并顺序执行,(因为已经过了定时器规定的延时时间,所以会立即执行,两个定时器的延时都是一样的)。

JS执行队列总结

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

setTimeout方法、事件和回调函数(异步函数)

"任务队列"是一个先进先出的数据结构,排在前面的事件,优先被主线程读取。主线程的读取过程基本上是自动的,只要执行栈一清空,"任务队列"上第一位的事件就自动进入主线程。但是,由于"定时器"功能和事件驱动等,主线程首先要检查一下执行时间或事件是否被触发,才能返回主线程。

当一个JS文件中有很多回调函数的时候,我们无法确认哪个回调会先进入任务队列。所以,遇到回调的时候要小心处理啦。

相关文章

  • 详解JS执行队列(JavaScript执行顺序),搞懂setTi

    定义:setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。 举个栗子: 但是setTimeou...

  • 详解JavaScript的任务、微任务、队列以及代码执行顺序

    摘要: 理解JS的执行顺序。 作者:前端小智 原文:详解JavaScript的任务、微任务、队列以及代码执行顺序 ...

  • promise ES6 一看就懂

    Promise 我们都知道JavaScript是单线程执行的,执行的顺序是按照任务队列来执行的。 什么是任务队列?...

  • js 异步执行顺序

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

  • node定时器

    执行流程 本轮循环结束后执行 process.nextTickPromise 微任务队列 下轮循环执行 setTi...

  • js代码的异步执行方式

    由于JavaScript的执行环境是单线程的,导致js代码的两种执行方式: 以js代码的先后顺序执行的顺序型 以事...

  • iOS 多线程-CGD

    串行队列同步执行,不开启新线程,任务按顺序执行 串行队列异步执行,会开启新线程(1个),任务按照顺序执行 并行队列...

  • 涨知识:浏览器中的event loop

    js在执行过程中会产生执行环境,这些执行环境会被顺序的放入执行栈中,如果遇到异步的代码,会被加入到task队列中,...

  • JavaScript定时器

    详解 这两个调用方法会在指定时间后或指定周期将当前任务添加到JS的任务队列,然后队列里的任务会按顺序执行 区别 s...

  • JavaScript预编译和变量提升

    JavaScript是解释型语言,会先预编译,然后执行,在执行过程中顺序执行。因此在JS中存在变量提升的现象 在函...

网友评论

      本文标题:详解JS执行队列(JavaScript执行顺序),搞懂setTi

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