美文网首页
详解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

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