js中的事件机制

由于js是单线程的,所以在遇到事件绑定、ajax请求的时候回造成阻塞,因此就产生了异步操作。可以让js的主线程持续工作。在这个过程中主要有三个东西,一是主线程、二是任务队列、三是回调函数。

主线程就是不断地从任务队列里面取出一个事件去执行,在执行完这个时间之后再去任务队列取事件。如果任务队列没事件就会处于等待状态。

主线程取到任务队列里的事件之后会将事件的上下文放在调用栈中,然后一步一步执行里面的操作。如果遇到异步操作就会交给浏览器内核的其他模块进行处理,等处理完之后,再将回调函数放入任务队列汇总。

任务队列是用来存放事件的,当主线程完成当前操作之后,就会从这里面取事件执行。任务队列分为macro-task和micro-task(micro-task只有一个)两种队列,主线程会先调用marco-task任务队列,直到函数调用栈中当前macro-task执行上下文结束,再执行micro-task中的任务,执行完micro-task中的事件后又去执行macro-task中的事件,如此反复。

macro-task:script(整体代码), setTimeout, setInterval, setImmediate, I/O, UI rendering。

micro-task: process.nextTick, Promises, Object.observe, MutationObserver

回调函数是在异步操作执行完之后,放入任务队列让主线程执行的函数。

示例:

// demo
console.log('golb1');

setTimeout(function() {
    console.log('timeout1');
    process.nextTick(function() {
        console.log('timeout1_nextTick');
    })
    new Promise(function(resolve) {
        console.log('timeout1_promise');
        resolve();
    }).then(function() {
        console.log('timeout1_then')
    })
})

setImmediate(function() {
    console.log('immediate1');
    process.nextTick(function() {
        console.log('immediate1_nextTick');
    })
    new Promise(function(resolve) {
        console.log('immediate1_promise');
        resolve();
    }).then(function() {
        console.log('immediate1_then')
    })
})

process.nextTick(function() {
    console.log('glob1_nextTick');
})
new Promise(function(resolve) {
    console.log('glob1_promise');
    resolve();
}).then(function() {
    console.log('glob1_then')
})

setTimeout(function() {
    console.log('timeout2');
    process.nextTick(function() {
        console.log('timeout2_nextTick');
    })
    new Promise(function(resolve) {
        console.log('timeout2_promise');
        resolve();
    }).then(function() {
        console.log('timeout2_then')
    })
})

process.nextTick(function() {
    console.log('glob2_nextTick');
})
new Promise(function(resolve) {
    console.log('glob2_promise');
    resolve();
}).then(function() {
    console.log('glob2_then')
})

setImmediate(function() {
    console.log('immediate2');
    process.nextTick(function() {
        console.log('immediate2_nextTick');
    })
    new Promise(function(resolve) {
        console.log('immediate2_promise');
        resolve();
    }).then(function() {
        console.log('immediate2_then')
    })
})