JavaScript的执行机制,同步异步那些事

一、 js的执行机制----宏任务和微任务

1、 同步任务、异步任务引入

(1) Js中,所有任务可以分成两种,一种是同步任务(synchronous),另一种是异步任务(asynchronous)。同步任务指的是,在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务;异步任务指的是,不进入主线程、而进入"任务队列"(task queue)的任务,只有"任务队列"通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行。
其中,异步执行的运行机制如下:(同步执行也是如此,因为它可以被视为没有异步任务的异步执行。)
(2) 所有同步任务都在主线程上执行,形成一个执行栈。
(3) 主线程之外,还存在一个"任务队列"(task queue)。只要异步任务有了运行结果,就在"任务队列"之中放置一个事件。
(4) 一旦"执行栈"中的所有同步任务执行完毕,系统就会读取"任务队列",看看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。
(5) 主线程不断重复上面的第三步((2)(3)(4))。
=>主线程从"任务队列"中读取事件,这个过程是循环不断的,所以整个的这种运行机制又称为Event Loop(事件循环)
注:以上参考阮一峰的JavaScript 运行机制详解:再谈Event Loop

http://www.ruanyifeng.com/blog/2014/10/event-loop.html.

2、进一步理解

Js中的单线程任务被分为同步任务和异步任务,在执行的时候,同步任务会生成一个同步任务队列,在同步任务执行的过程中,遇到异步操作就会把异步任务存储到另一个任务队列中。

在这里插入图片描述
同步任务和异步任务分别会进入不同的执行“场所”,同步任务会进入主线程,异步的进入Event Table是一个注册站,调用栈会让Event Table注册一个函数,该函数会在设定的N秒后被调用。当指定的任务发生时,Event Table会将这个函数移到Event Queue(一个缓冲区域,这里的函数等待着被调用并移到调用栈),JavaScript引擎依据一条规则:有一个monitoring process会持续不断地检查调用栈是否为空,一旦为空,它会检查Event Queue里边是否有等待被调用的函数。如果存在,它就会调用这个Queue中第一个函数并将其移到调用栈中。如果Event Queue为空,那么这个monitoring process会继续不定期的检查。这一整个过程就是Event Loop。
例子:

$.ajax({
        url:'',
        data:'',
        success:() => {
            console.log('发送成功!');
        }
    })
    console.log('代码执行结束');

执行过程解析:
① ajax进入Event Table,注册回调函数success。
② 执行console.log(‘代码执行结束’)。
③ ajax事件完成,回调函数success进入Event Queue。
④ 主线程从Event Queue读取回调函数success并执行。

3、除了放置异步任务的事件,"任务队列"还可以放置定时事件,而JS异步还有一个机制就是遇到宏任务和微任务:

① macro-task(宏任务):可以理解是每次执行栈执行的代码就是一个宏任务,包括整体代码script,setTimeout,setInterval
② micro-task(微任务):可以理解是在当前task执行结束后立即执行的任务,Promise,process.nextTick

setTimeout的作用是等待给定的时间后为它的回调产生一个新的宏任务

setTimeout(function(){
        console.log(1);
    },0);
    new Promise(function(a,b){
        console.log(2);
        for(var i=0;i<10;i++){
            i==9&&a();
        }
        console.log(3)
    }).then(function(){
        console.log(4)
    });
    console.log(5);

二、关于react中合成事件池化的问题

nameBlur = (e) => {
        if(e.target.value.trim().length > 20){
            ShowMsg('字符串长度超过20,请修改', 'info');
        }
        console.log('e.target000', e.target);
        this.setState({

        }, () => {
            console.log('e.target111', e.target);
        });
    }

在这里插入图片描述
由于react追求极致的性能,SyntheticEvent是被池化的(pooling),也就是说是被复用的,事件处理程序会把这些对象重用于其他事件以提高性能。所以一旦事件监听回调被执行,合成事件对象就会被销毁,异步回调执行的时候合成事件对象已经被销毁了,所以再去找e.target会找不到。

解决办法:

1.添加e.persist(),将这个合成事件从事件池中取出,始终在内存中保留对这个时间的引用,所以在异步回调中依然可以获取到事件属性。
2、通过定义一个常量事先保存。

发布了30 篇原创文章 · 获赞 6 · 访问量 4735

猜你喜欢

转载自blog.csdn.net/EcbJS/article/details/104700800