精华内容
下载资源
问答
  • 宏任务微任务应用举例

    下面这个例子是进行0-n求和,与此同时还有一个其他任务(console.log(“其他任务”))。

    来看代码:

    一、传统的办法

     		let total =100
            let result  =0
            function Mysum(){
                let temp = total
                for(let i=0;i<temp;i++){
                    result+=total--
                    console.log(result)
                }
            }
            Mysum()
            console.log("另一个任务") 
    

    在这里插入图片描述
    通过代码我们可以看到,一直到求和结束之后才能执行另一个任务,这显然会影响我们后面代码的执行。下面通过宏任务和微任务的方式去修改代码,这样就不会让另一个任务一直处于等待求和的状态。

    二、修改为宏任务的方式

    首先将求和任务每次只进行10次计算,这样不会然后面的其他任务处于一直等待的状态。

            let total =100
            let result  =0
            function Mysum(){
                for(let i=0;i<10;i++){
                    if(total<=0) break
                    result+=total--
                    console.log(result)
                }
                if(total>0){
                    setTimeout(()=>{
                        Mysum()
                    },0)
                }
            }
            Mysum()
            console.log("另一个任务") 
    

    在这里插入图片描述
    从结果可以看到,我们每次只进行10次的计算,然后将后续未完成的求和任务放到宏任务队列中,这样就不会一直占用执行栈,之后的同步代码(输出其他任务)可以获得执行栈的使用权限,在同步代码执行成功之后,宏任务队列中的未完成任务接着进入执行栈执行,直到完成任务为止

    三、微任务的处理方式

            let total = 100
            let result = 0
            function Mysum(){
                Promise.resolve().then(()=>{
                for(let i=0;i<=100;i++){
                    result+=i
                    console.log(result)
                }
                })
            }
            Mysum()
            console.log("其他任务")
    

    这个思路和上面基本是一样的,调用函数的时候产生一个微任务,加载到微任务队列,执行同步代码输出其他任务,之后微任务队列中的求和开始执行。这个会先执行其他任务(输出其他任务),再进行求和的计算。

    如果对宏任务和微任务的执行过程不清楚,可以看下面这篇博客

    js中的宏任务和微任务(点我查看)

    展开全文
  • 宏任务微任务同步任务执行顺序以及使用async函数的值 有道云笔记地址:http://note.youdao.com/noteshare?id=7d1ac13517dee68ff3b16e2079338bd9&sub=AB8C799DBAD64A2EBBD6FD088A00FB95 async await 使用: ...

    宏任务微任务同步任务执行顺序以及使用async函数的值

    有道云笔记地址:http://note.youdao.com/noteshare?id=7d1ac13517dee68ff3b16e2079338bd9&sub=AB8C799DBAD64A2EBBD6FD088A00FB95

    async await 使用:

    使用async函数的值

    let data = this.getBusinessDetail(categoryId, true);
    
    data.then(function(val) {
    
        self.sealId = val.result.sealId || '';
    
        self.sealName = val.result.sealName || '';
    
    });

    定义async函数

    async getBusinessDetail(categoryId, initData) {
    
    try {
    
        const self = this;
    
    
    
    let data = await this.axios({
    
        url: '/category/' + categoryId,
    
        method: 'get'
    
    });
    
        data = data.data;
    
        this.sealPresence = !!data.result.sealId;
    
    if (data.result && data.result.physicsConfig) {
    
        this.nodes = data.result.physicsConfig.nodes;
    
        let approvalProcessArr = this.nodes.filter(item => {
    
        return item.assignSeal;
    
    });
    
    if (approvalProcessArr && approvalProcessArr[0].type !== 'START') {
    
        this.approvalProcess = approvalProcessArr[0].name;
    
    }
    
    this.processShow = true;
    
    } else {
    
        this.nodes = [];
    
        this.processShow = false;
    
    }
    
    if (!this.businessId) {
    
        this.sealId = data.result.sealId;
    
        this.sealName = data.result.sealName;
    
    }
    
    return data;
    
    } catch (error) {
    
        console.log(error);
    
    }
    
    },

    js执行顺序:

    https://juejin.im/post/59e85eebf265da430d571f89

    async await promise执行顺序:https://zhuanlan.zhihu.com/p/52000508?utm_source=wechat_session&utm_medium=social&utm_oi=66091162271744

    宏任务、微任务、执行顺序特别全:

    首先先排出宏任务队列,然后执行第一个宏任务,执行宏任务里面的微任务,第一个宏任务了里面的微任务全部结束后执行第二个宏任务then里面执行的放在同步任务之后,同步任务就是

     

    https://blog.csdn.net/weixin_42420703/article/details/82790942

     

    finally用法

     

     

     

     

     

     

     

    展开全文
  • 主要介绍了JavaScript事件循环及宏任务微任务原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 宏任务微任务 执行栈中当前的任务就可以当作宏任务,宏任务是宿主源发起的比如node.js 浏览器,所以定时器属于宏任务;微任务是javascript发起的,promise是微任务;借一张循坏图: 微任务总是在宏任务之前执行;...

    宏任务微任务

    执行栈中当前的任务就可以当作宏任务,宏任务是宿主源发起的比如node.js 浏览器,所以定时器属于宏任务;微任务是javascript发起的,promise是微任务;借一张循坏图:
    在这里插入图片描述
    在这里插入图片描述

    微任务总是在宏任务之前执行;案例如下:宏任务1里面的微任务2在宏任务2前面执行,每次循坏都会寻找是否有微任务,有的话就执行完微任务,没有才去执行宏任务;
    在这里插入图片描述

    展开全文
  • JavaScript 执行机制 JavaScript 执行机制 宏任务 微任务 记住网址防止走丢

    JavaScript 执行机制

    JavaScript 执行机制 宏任务 微任务
    结合这个
    以及这个

    Vue的nextTick

    原理
    例子
    源码分析
    记住网址防止走丢

    展开全文
  • 主要介绍了JS事件循环机制event loop宏任务微任务原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 宏任务微任务同步异步执行顺序 JS 分为同步任务和异步任务 同步任务在主线程上执行 异步任务放在主线程之外的一个任务队列 主线程执行完毕后,读取任务队列的内容 宏任务(macro)task 当前主线程上执行的就是一个宏...
  • JS宏任务微任务

    2020-11-06 20:55:32
    微任务和宏任务: 任务的划分: ...执行顺序:先执行完全部的主线程同步任务(代码),全部执行完毕有空闲了,才开始调度微任务,所有的微任务执行完毕,再开始调度宏任务执行。 例1: 主线程 + 宏任务 c
  • JS中的宏任务微任务

    2020-08-15 21:09:05
    JS中的宏任务微任务 首先js一大特点就是单线程,同一时间只能干一件事情。所以为了协调事件,用户交互,脚本,ui渲染和网络处理等行为,防止线程不堵塞,Event Loop的方案应用而生。 Event Loop包含两大类: 一类是...
  • JS事件循环机制:同步与异步任务 之 宏任务 微任务 阅读目录 javascript事件循环 setTimeout和setInterval中的执行时间 宏任务微任务 javascript是单线程,一切javascript版的"多线程"都是用单线程模拟...
  • 文章目录一、js单线程二、宏任务微任务 一、js单线程 JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊。 JavaScript的单线程...
  • JavaScript宏任务微任务

    2020-10-24 23:52:11
    宏任务(macrotask )和微任务(microtask ) ** 宏任务一般是:包括整体代码script,setTimeout,setInterval、I/O、UI render。 微任务主要是:Promise、Object.observe、MutationObserver(参考此处链接-详情)。 ...
  • 分享一篇 写的很好的 宏任务 微任务 同步异步的文章 文章原地址:https://juejin.im/post/59e85eebf265da430d571f89 这一次,彻底弄懂 JavaScript 执行机制 本文的目的就是要保证你彻底弄懂javascript的执行...
  • 答: 宏任务:setTimeout setInterval Ajax DOM事件 微任务:Promise async/await 微任务宏任务的执行时间要早
  • JS事件循环基础: 宏任务:setTimeout(() => { console.log("setTimeout新的宏任务");... console.log("resolve微任务")); console.log("主线程任务"); 执行顺序: Promise里面的任务 console.log("pr
  • 首先我们需要明白以下几件事情: JS分为同步任务和异步任务 同步任务都在主线程上执行,形成一个执行栈 主线程之外,事件触发线程管理着一个任务队列,只要异步...(macro)task(又称之为宏任务),可以理解是每次执...
  • 如下图,当主线程任务完成后,去微任务队列查询是否有微任务,处理完微任务后,主线程与微任务队列均没有任务了,去宏任务队列里执行宏任务。 队列都是先进先出 #mermaid-svg-YlZvcs5zgxd23If3 .label{font-family:'...
  • 谈谈对js单线程,宏任务微任务理解 在前端的面试中经常会问到关于代码执行顺序的问题,我们先看下面一段代码: setTimeout( () => console.log(4)) new Promise(resolve => { resolve() console.log(1) ...
  • 宏任务微任务 定义 宏任务: 常用的包括setTimeout,setInterval 微任务: 常用的包括Promise. then finally catch, process.nextTick 执行顺序为:微任务先于宏任务执行 setTimeout(function () { console....
  • 在按照代码顺序执行时,主线程执行同步代码,遇到异步代码,判断宏任务还是微任务,将其注册事件,分别加入宏任务队列和微任务队列,同步代码执行完毕后,判断微任务队列是否有事件,若有,将微任务队列所有事件执行...
  • 宏任务 微任务 陷阱

    2020-12-17 16:43:37
    { await console.log('async2 end') 立即执行 2 } async1() setTimeout(function() { console.log('setTimeout') 异步队列 1 宏任务 }, 0) new Promise(resolve => { console.log('Promise') 立即执行 3 resolve() }...
  • JS 分为同步任务和异步任务 同步任务在主线程上执行 ...宏任务(macro)task:当前主线程上执行的就是一个宏任务。例: script 的代码、setTimeout、setInterval、postMessage等。 微任务:microtask。例:Promi

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,919
精华内容 767
关键字:

宏任务微任务