重学前端
程劭非(winter)
前手机淘宝前端负责人
立即订阅
32956 人已学习
课程目录
已完结 58 讲
0/4登录后,你可以任选4讲全文学习。
开篇词+学习路线+架构图 (3讲)
开篇词 | 从今天起,重新理解前端
免费
明确你的前端学习路线与方法
列一份前端知识架构图
模块一:JavaScript (15讲)
JavaScript类型:关于类型,有哪些你不知道的细节?
JavaScript对象:面向对象还是基于对象?
JavaScript对象:我们真的需要模拟类吗?
JavaScript对象:你知道全部的对象分类吗?
JavaScript执行(一):Promise里的代码为什么比setTimeout先执行?
JavaScript执行(二):闭包和执行上下文到底是怎么回事?
JavaScript执行(三):你知道现在有多少种函数吗?
JavaScript执行(四):try里面放return,finally还会执行吗?
JavaScript词法:为什么12.toString会报错?
(小实验)理解编译原理:一个四则运算的解释器
JavaScript语法(预备篇):到底要不要写分号呢?
JavaScript语法(一):在script标签写export为什么会抛错?
JavaScript语法(二):你知道哪些JavaScript语句?
JavaScript语法(三):什么是表达式语句?
JavaScript语法(四):新加入的**运算符,哪里有些不一样呢?
模块二:HTML和CSS (16讲)
HTML语义:div和span不是够用了吗?
HTML语义:如何运用语义类标签来呈现Wiki网页?
CSS语法:除了属性和选择器,你还需要知道这些带@的规则
HTML元信息类标签:你知道head里一共能写哪几种标签吗?
CSS 选择器:如何选中svg里的a元素?
CSS选择器:伪元素是怎么回事儿?
HTML链接:除了a标签,还有哪些标签叫链接?
CSS排版:从毕升开始,我们就开始用正常流了
HTML替换型元素:为什么link一个CSS要用href,而引入js要用src呢?
HTML小实验:用代码分析HTML标准
CSS Flex排版:为什么垂直居中这么难?
CSS动画与交互:为什么动画要用贝塞尔曲线这么奇怪的东西?
HTML语言:DTD到底是什么?
CSS渲染:CSS是如何绘制颜色的?
CSS小实验:动手做,用代码挖掘CSS属性
HTML·ARIA:可访问性是只给盲人用的特性么?
模块三:浏览器实现原理与API (9讲)
浏览器:一个浏览器是如何工作的?(阶段一)
浏览器:一个浏览器是如何工作的?(阶段二)
浏览器:一个浏览器是如何工作的(阶段三)
浏览器:一个浏览器是如何工作的?(阶段四)
浏览器:一个浏览器是如何工作的?(阶段五)
浏览器DOM:你知道HTML的节点有哪几种吗?
浏览器CSSOM:如何获取一个元素的准确位置
浏览器事件:为什么会有捕获过程和冒泡过程?
浏览器API(小实验):动手整理全部API
模块四:前端综合应用 (5讲)
性能:前端的性能到底对业务数据有多大的影响?
工具链:什么样的工具链才能提升团队效率?
持续集成:几十个前端一起工作,如何保证工作质量?
搭建系统:大量的低价值需求应该如何应对?
前端架构:前端架构有哪些核心问题?
特别加餐 (9讲)
新年彩蛋 | 2019,有哪些前端技术值得关注?
用户故事 | 那些你与“重学前端”的不解之缘
期中答疑 | name(){}与name: function() {},两种写法有什么区别吗?
答疑加餐 | 学了这么多前端的“小众”知识,到底对我有什么帮助?
加餐 | 前端与图形学
加餐 | 前端交互基础设施的建设
期末答疑(一):前端代码单元测试怎么做?
期末答疑(二):前端架构中,每个逻辑页面如何可以做到独立发布呢?
加餐 | 一个前端工程师到底需要掌握哪些技能?
尾声 (1讲)
尾声 | 长风破浪会有时,直挂云帆济沧海
重学前端
登录|注册

JavaScript执行(一):Promise里的代码为什么比setTimeout先执行?

winter 2019-02-23
你好,我是 winter。这一部分我们来讲一讲 JavaScript 的执行。
首先我们考虑一下,如果我们是浏览器或者 Node 的开发者,我们该如何使用 JavaScript 引擎。
当拿到一段 JavaScript 代码时,浏览器或者 Node 环境首先要做的就是;传递给 JavaScript 引擎,并且要求它去执行。
然而,执行 JavaScript 并非一锤子买卖,宿主环境当遇到一些事件时,会继续把一段代码传递给 JavaScript 引擎去执行,此外,我们可能还会提供 API 给 JavaScript 引擎,比如 setTimeout 这样的 API,它会允许 JavaScript 在特定的时机执行。
所以,我们首先应该形成一个感性的认知:一个 JavaScript 引擎会常驻于内存中,它等待着我们(宿主)把 JavaScript 代码或者函数传递给它执行。
在 ES3 和更早的版本中,JavaScript 本身还没有异步执行代码的能力,这也就意味着,宿主环境传递给 JavaScript 引擎一段代码,引擎就把代码直接顺次执行了,这个任务也就是宿主发起的任务。
但是,在 ES5 之后,JavaScript 引入了 Promise,这样,不需要浏览器的安排,JavaScript 引擎本身也可以发起任务了。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《重学前端》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(96)

  • 杨学茂
    function sleep(duration){
        return new Promise(function(resolve){
            setTimeout(resolve, duration);
        })
    }
    async function changeColor(duration,color){
        document.getElementById("traffic-light").style.background = color;
        await sleep(duration);

    }
    async function main(){
        while(true){
            await changeColor(3000,"green");
            await changeColor(1000, "yellow");
            await changeColor(2000, "red");
        }
    }
    main()

    作者回复: 这个写的完全挑不出毛病,其它同学可以参考。

    2019-02-23
    269
  • whatever
    https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/
    为了更深入的理解宏任务和微任务,读了这篇。感觉文中说的微任务总是先于宏任务会让人产生误解,更准确的说法应该是微任务总会在下一个宏任务之前执行,在本身所属的宏任务结束后立即执行。
    2019-03-02
    4
    91
  • 无羡
    const lightEle = document.getElementById('traffic-light');
    function changeTrafficLight(color, duration) {
      return new Promise(function(resolve, reject) {
        lightEle.style.background = color;
        setTimeout(resolve, duration);
      })
    }

    async function trafficScheduler() {
      await changeTrafficLight('green', 3000);
      await changeTrafficLight('yellow', 1000);
      await changeTrafficLight('red', 2000);
      trafficScheduler();
    }

    trafficScheduler();

    作者回复: 这个写的不错,不过,既然都用到了await,是不是可以不用递归呢?

    2019-02-23
    1
    27
  • 奇奇
    怎么区分是宿主环境还是js引擎发起的任务呢
    2019-02-28
    16
  • deiphi
    // 比较原始的写法
    function color () {
    console.log('green');

    setTimeout(() => {
    console.log('yellow');

    setTimeout(() => {
    console.log('red');

    setTimeout(color, 2000);
    }, 1000)
    }, 3000);
    }
    color();

    作者回复: 哈哈哈 这个硬核了啊…… 结果倒是对的

    不试试Promise吗? 我讲了这么多呢……

    2019-02-26
    2
    16
  • 许吉中
    async/await函数属于宏观还是微观?

    作者回复: 它产生Promise,当然是微观任务了

    2019-02-24
    7
  • CaveShao
    function func(color, duration) {
            return new Promise(function(resolve, reject) {
                light.style.backgroundColor = color;
                setTimeout(function() {
                    it.next();
                }, duration)
            })
        }

        function* main() {
            while (1) {
                yield func('red',2000);
                yield func('yellow',1000);
                yield func('green',3000);
            }
        }

        var it = main();
        it.next();
    2019-05-15
    4
  • 帅气小熊猫
    怎么确定这个微任务属于一个宏任务呢,js主线程跑下来,遇到setTImeout会放到异步队列宏任务中,那下面的遇到的promise怎么判断出它是属于这个宏任务呢?是不是只有这个宏任务没有从异步队列中取出,中间所碰到的所有微任务都属于这个宏任务?
    2019-03-22
    4
  • 周序猿
    // 另类的写法
     var lightDiv = document.getElementById('light')
        function wait(seconds){
          return new Promise((resolve)=>{
            setTimeout(resolve,seconds)
          })
        }

        function light(color, waitTime){
          this.color = color
          this.waitTime = waitTime
        }
        light.prototype.run = function(){
          lightDiv.style.backgroundColor = this.color
          return wait(this.waitTime).then(()=>{
            return this.nextLight.run()
          })
        }

        let redLight = new light('red',2000)
        let yellowLight = new light('yellow',1000)
        let greenLight = new light('green',3000)

        redLight.nextLight = greenLight
        yellowLight.nextLight = redLight
        greenLight.nextLight = yellowLight

        redLight.run()

    作者回复: 额 这个结果是对的 不过封装成这样 合适吗?

    2019-02-26
    4
  • 许童童
    async function controlLoop () {
      await changeColor('green', 3000)
      await changeColor('yellow', 1000)
      await changeColor('red', 2000)
      await controlLoop()
    }

    async function changeColor (color, time) {
      console.log(color + ' begin')
      return new Promise((resolve) => {
        setTimeout(() => {
          console.log(color + ' end')
          resolve()
        }, time)
      })
    }

    controlLoop()

    作者回复: 你这个有点问题,执行多了可能爆栈,改改试试?

    2019-02-23
    4
    4
  • 拒绝第十七次🤤
    let sleep = (color,deep)=>{
          return new Promise(reslove=>{
            setTimeout(()=>reslove(color) ,deep)
          })
        }
        async function changColor (color){
          await sleep ('green',3000),
          await sleep ('yellow',1000)
          await sleep ('red',2000)
        }
        changColor();
    2019-04-10
    3
  • Geek_e21f0d
    let lightStates = [{
            color: 'green',
            duration: 3000
        },
        {
            color: 'yellow',
            duration: 1000
        },
        {
            color: 'red',
            duration: 2000
        }];
        let setLightColorAndVisibleDuration = function(color, duration) {
            //set light color
            return new Promise((resolve) => {
                setTimeout(() => {
                    resolve();
                }, duration);
            });
        }
        let startShowLight = async function() {
            let index = 0;
            while(index <= lightStates.length - 1) {
                let nextState = lightStates[index];
                await setLightColorAndVisibleDuration(nextState.color, nextState.duration);
                index++;
            }
            
        };
        startShowLight();

    作者回复: 封装不是越复杂越好,太复杂了还不如直接setTimeout了

    2019-02-26
    3
  • Jurieo
    哈哈,我自己思考的执行顺序是 同步-异步-回调,成功正确输出了老师你上面的各个代码的答案。
    2019-02-26
    3
  • NeverEver
    我想到的方法是用Recursion。写一个函数setColor,需要一个参数color,函数里首先把div的backgroundColor设置color,然后用setTimeout来设置下一个颜色,根据传入的color相应更改时间和颜色即可

    作者回复: 代码写写看呀。 动手是收获最大的。

    2019-02-23
    3
  • a小磊。จุ๊บ 🌹
    大佬们我有问题想不明白:
    new Promise(function(resovle, reject) {
            setTimeout(resovle, duration);
          })
    setTimeout(resovle, duration);和setTimeout(() => {resovle()}, duration);两者到底有什么区别,想不明白,求教
    2019-04-11
    2
  • 小孔
    1. async/await ,遇到await时就会退出执行,我想问下,退出之后是处于等待await执行完再开始之后吗?
    2. 如果promise中产生setTimeout函数,那么在这里的setTimeout是处于微观任务对吗?因为这是js引擎直接发起的?

    作者回复: 1. 对
    2. 还是宏观任务,因为你调用到了引擎以外的API呀

    2019-04-09
    2
  • oillie
    一个宏任务包含一个微任务队列?还是一个event loop里只有一个微任务队列,虽然不影响实际效果,但还是想确认下..
    2019-03-02
    2
  • dellyoung
    15行代码最简实现:
    const changeNowColor = (time) => {
        setTimeout(() => {
            switch (document.getElementById('root').style.background) {
                case 'green':
                    document.getElementById('root').style.background = 'yellow';
                    return changeNowColor(1000);
                case 'yellow':
                    document.getElementById('root').style.background = 'red';
                    return changeNowColor(2000);
                case 'red':
                    document.getElementById('root').style.background = 'green';
                    return changeNowColor(3000);
            }
        }, time);
    };
    changeNowColor(3000);
    2019-09-08
    1
  • Y
    function light(duration) {
        return new Promise((resolve) => {
            setTimeout(resolve,duration)
        })
    }

    async function show() {
        console.log("green");
        await light(3000);
        console.log("yellow");
        await light(1000);
        console.log("red");
        await light(2000);
        return true
    }

    async function cycle() {
        while(await show());
    }

    cycle()
    2019-07-10
    1
  • 夏味
    function light(status, wait) {
        console.log(status);
        return new Promise(reslove => setTimeout(reslove, wait * 1000));
    }

    async function run () {
        while(true) {
            await light('green', 3)
            await light('yellow', 1)
            await light('red', 2);
        }
    }

    run()
    2019-06-16
    1
收起评论
96
返回
顶部