JavaScript的事件循环机制

2018-03-05

JavaScript的线程/任务队列/任务分发

JavaScript为单线程

JavaScript代码执行除了依靠函数调用栈，还依赖任务队列

一个线程中可以拥有多个任务队列，任务为宏任务，微任务，macro-task/micro-task，新标准为task/jobs

macro-task包括：script整体代码，setTimeout，setInterval，setImmediate(Nodejs中有)，I/O，UI rendering

micro-task包括：process.nextTick(Nodejs中有)，Promise，Object.observer(已废弃)，mutationObserver(H5新特性)

谨记区分类别宏任务和微任务，并且都借助函数调用栈完成。

setTimeout(function() {
    console.log('timeout1');
})
new Promise(function(resolve) {
    console.log('promise1');
    for(var i = 0; i < 1000; i++) {
        i == 99 && resolve();
    }
    console.log('promise2');
}).then(function() {
    console.log('then1');
})
console.log('global1');
// 输出顺序：promise1,promise2,global,then1,timeout1

Promise构造函数的第一个参数实在new的时候执行，不会进入其他队列，在当前队列执行，而promise的then会进行到微任务队列执行。

// demo02
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')
    })
})

依次输出：golb1，glob1_promise，glob2_promise，glob1_nextTick，glob2_nextTick，glob1_then，glob2_then，timeout1，timeout1_promise，timeout2，timeout2_promise，timeout1_nextTick，timeout1_then，timeout2_nextTick，timeout2_then，immediate1，immediate1_promise，immediate2，immediate2_promise，immediate1_nextTick，immediate1_then，immediate2_nextTick，immediate2_then

任务分发器划分宏任务和微任务队列，每次宏任务队列执行完毕，接下来执行该宏任务产生的微任务队列，队列清空之后，再次进行宏任务队列的执行，直到所有宏/微队列元素执行完毕

订阅通知的设计模式实现

// 用数组模拟一个队列
var tasks = [];
// 模拟一个事件分发器
var addFn1 = function(task) {
    tasks.push(task);
}
// 执行所有的任务
var flush = function() {
    tasks.map(function(task) {
        task();
    })
}
// 最后利用setTimeout/或者其他你认为合适的方式丢入事件循环中
setTimeout(function() {
    flush();
})
// 当然，也可以不用丢进事件循环，而是我们自己手动在适当的时机去执行对应的某一个方法
var dispatch = function(name) {
    tasks.map(function(item) {
        if(item.name == name) {
            item.handler();
        }
    })
}
// 当然，我们把任务丢进去的时候，多保存一个name即可。
// 这时候，task的格式就如下
demoTask =  {
    name: 'demo',
    handler: function() {}
}
// 于是，一个订阅-通知的设计模式就这样轻松的被实现了

参考文章：
事件循环机制——这波能反杀
如有错误，烦请指正，谢谢！