zoukankan      html  css  js  c++  java
  • JavaScript运行机制详解

    var test = function(){
        alert("test");
    }
    var test2 = function(){
        alert("test2");
    }
    setTimeout(function(){
       alert("setTimeout");
    },1000);
    test();
    test2();
    //test
    //test2
    //setTimeout;
    

    上面代码的运行结果一直让我很费解,为什么test()test2()没有在setTimeout()之后才执行,相当于先执行了定时器外面的函数,而后再执行定时器里的函数,这是为什么呢?在解释之前,我们有必要知道JavaScript的运行机制。


    一、JavaScript为什么是单线程

    要回答这个问题,只要我们假设一下,如果JavaScript支持多线程,一个线程在某个DOM节点上添加内容,另外一个线程删除了这个节点,那么浏览器该以哪个线程为准呢?所以答案也就不言而喻了。为了避免复杂性,JavaScript从诞生就是单线程。
    在HTML5中,推出了web worker标准,允许JavaScript脚本创建多个线程,但是子线程完全受主线程的控制,且不得操作DOM,所以也是没有违背JavaScript单线程的本质。


    二、任务队列

    因为JavaScript是单线程,意味着任务要一个接着一个完成,但是,如果前一个任务执行时间很长,那么后面的任务就得一直阻塞着,这样用户体验十分差。
    JavaScript的设计者考虑到了这一点,所以他将JavaScript的任务分为两种,在主线程上执行的任务"同步任务",被主线程挂载起来的任务"异步任务",后者一般是放在一个叫任务队列的数据结构中。
    那么一般异步执行运行机制如下(也是JavaScript的运行机制):

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

    参考图片(图片来源 阮一峰老师讲解的JavaScript运行机制详解)

    bg2014100801.jpg


    三、事件和回调函数

    看了前面的讲解,我一开始提出的问题视乎可以这样理解,test()test2()属于“执行栈”中的同步任务,而定时器则是任务队列里面的异步任务,那么定时器就是属于异步任务中的一种,在讲定时器之前先认识一下任务队列里面的另外一个重要成员,事件。其实任务队列就是一个事件队列,因为一般我们绑定一个事件,比如点击事件等等,都是在某一个时刻才触发执行的,这个时候就得放到任务队列里面,等待执行,而在某个DOM节点上绑定了事件,就要有相应的回调函数,它们是相辅相成的。
    所谓回调函数,就是那些被挂载起来,等待执行的代码,主线程执行任务队列里面的异步任务,其实就是执行这些回调函数。
    一般只有主线程所有任务都执行完毕了,才会执行任务队列里面的异步任务,一般是按照队列的“先进先出”顺序执行,但是因为存在定时器,所以主线程要检查执行时间,只有到了规定的时间,才能返回主线程。


    四、定时器

    终于到特殊的定时器了,定时器主要由setTimeout()setInterval()两个函数来完成,它们的内部运行机制完全一样,不同的只是,前者一次性执行,而后者反复执行。定时器,属于任务队列中的异步任务,所以才会出现上面的问题,再看几个例子就能理解了,

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

    上面代码的执行结果是1,3,2,因为只有setTimeout里面的代码是异步任务,其它都是主线程里的同步任务,所以只有执行完了主线程中的所有任务,才会执行setTimeout中的任务。

  • 相关阅读:
    一个很老的故事: 水和鱼的故事
    签到
    WEBPART结合实际的应用(.Net2005)
    Silverlight 3正式版新鲜出炉
    一个端口扫描的小程序
    带验证功能的的TextBox
    php解析url并得到url中的参数及获取url参数的四种方式
    Mysql外键约束设置使用方法
    require(): open_basedir restriction in effect. 解决方法
    PHP将变量存储在数据库中,读取并执行变量的方法
  • 原文地址:https://www.cnblogs.com/mcray/p/6938417.html
Copyright © 2011-2022 走看看